dou4624
dou4624
2012-09-03 04:18

当访问者输入文本字段中的访问者键入颜色代码时,自动更改样本边框

I would like to know how to auto change sample border when visitor key-in color code in input textfield at:

Do you have a particular border colour you would like?

input name="ContentInclude:borderspecs" type="text" maxlength="200" id="ContentInclude_borderspecs" tabindex="5" style="width:500px"

https://advertiser.seek.com.au/advertisers/catalogue/templaterequest.ascx

The sample code start with: begin sample template

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dongmei5168 dongmei5168 9年前

    The simplest solution:

    <input name="ContentInclude:borderspecs" type="text" maxlength="200" 
        id="ContentInclude_borderspecs" tabindex="5" style="width:500px" 
        onkeyup="javascript:changeBorderColor(this);">
    

    JS code:

    <script>
    function changeBorderColor(elem){
        var template = document.getElementById('sampletemplate');
        if (elem.value.match(/^\#([\dabcdef]{3}|[\dabcdef]{6})$/i)) { // HEX code
            template.style.borderColor = elem.value;
        }
        // more else if to match other possible values
        else { // reset to default
            template.style.borderColor = null; // or "black"
        }
    }
    </script>
    

    // edited so it changes the color of template preview div#sampletemplate

    点赞 评论 复制链接分享