当页面加载时,如何将文本框的背景色设置为其自己的值

时间:2018-09-28 18:55:53

标签: javascript

我认为这会起作用:

<input type="text" id="ThisIsDynamicAsItsInARepeater" OnLoad="this.style.backgroundColor=this.innerHTML"

但这让我明白了

  

期望的标识符

我知道文本框的值是有效的HTML颜色值。

1 个答案:

答案 0 :(得分:0)

onload属性不适用于输入。您需要在javascript标记内完成此操作。 这应该可以完成工作:)

一些输入

<input type="text" id="ThisIsDynamicAsItsInARepeater" value="green" />
<input type="text" id="ThisIsDynamicAsItsInARepeater" value="black" />
<input type="text" id="ThisIsDynamicAsItsInARepeater" value="blue" />

JS     

//wait for the page to load
window.onload = function(){

//target all inputs first
var input = document.getElementsByTagName('input');
for(var i = 0; i< input.length; i++){
    //filter out inputs which have id attribute
    if(input[i].hasAttribute("id")){
        //now check if they have ThisIsDynamicAsItsInARepeater
        if( input[i].getAttribute("id").indexOf('ThisIsDynamicAsItsInARepeater') >= 0){
            //finally change color
            input[i].style.backgroundColor = input[i].value;
        }
    }
}

}
</script>