自動改變樣品邊境時，在輸入文本框

Question

我想訪問者鍵入顏色代碼知道如何自動切換樣品邊境當訪問者鍵，在輸入文本框顏色代碼：

你有特定的邊框顏色，你想？

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

示例代碼開始：開始樣品模板

Answer 1

的最簡單的解決方案：

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

JS代碼：

<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> 

//編輯，以便它改變 模板預覽的顏色div#sampletemplate