检查表单输入的文本并更改它的颜色

这里我有一个问题，我不能克服。这是代码，我希望脚本改变表单输入的颜色，当输入的文本改变：检查表单输入的文本并更改它的颜色

function checkName(name) 
{ 
if (name.value == "value1" || name.value == "value2" || name.value == "value3" || name.value == "value4" || name.value == "value5" || name.value == "value6"){ 
document.forms['un'].elements['name'].style.color='#ffbb00' 
} 
else { 
document.forms['un'].elements['name'].style.color='#000000' 
} 
}

正如你可以看到，当输入的文本与提供者之一相匹配，它应该变为橙色，和否则，它应该是黑色的。（我有一个输入用onChange来切换这个函数）我只是不能让它工作，所以我可以有多种选择何时更改颜色，并且当语句变为无效时也会变回。任何帮助？

来源

2012-04-20 SeinopSys

你可以发布你的完整代码，也许在jsFiddle？ – SenorAmor 2012-04-20 21:19:26

我还没有真正读过任何源代码来验证这一点，但是不应该将一个整数传递给'document.forms []'而不是一个字符串''un''？ – 2012-04-20 21:19:46

I have an input toggling this function with an onChange thing让你输入

<input type=text size=20 name='name' onchange="checkName(this)">

的d功能可能是

function checkName(el) 
{ 
    if (el.value == "value1" || el.value == "value2" || el.value == "value3" || el.value == "value4" || el.value == "value5" || el.value == "value6") 
    { 
     el.style.color='#ffbb00' 
    } 
    else 
    { 
     el.style.color='#000000' 
    } 
}

An example.

你也可以尝试像onkeyupthis example。

来源

2012-04-20 21:26:15

这工作，谢谢你:) – SeinopSys 2012-04-21 06:30:11

试试这个：

function checkName(element) { 
    if (element.value == ...) { 
     element.className = "inputError"; 
    } else { 
     element.className = ""; 
    } 
}

在你的CSS文件

然后：

.inputError { 
    background-color: #FF0000; 
    background-image: url(exclamation_mark.png); 
    background-position: right 50%; 
    background-repeat: no-repeat; 
    background-size: contain; 
    -moz-background-size: contain; 
    -webkit-background-size: contain; 
    -o-background-size: contain; 
}

现在你已经预先定义的CSS样式的输入框，每次你检查输入框中可以设置到适当的CSS类名称。

现在，所有你需要做的是这样的：

<input id="myTextBox" type="text" onkeyup="javascript: checkName(this);" />

希望这有助于！

来源

2012-04-20 21:23:27 Ozzy

我觉得有点太复杂。 – SeinopSys 2012-04-21 06:32:00

问题出在您的身上我无法正确地将您提供的代码放到我的页面中（也许是因为我刚刚开始网络编程），所以不要把它当成任何不好的东西，另一个我接受的代码是I能够很容易地实现，但这并不意味着你的不好。 ;） – SeinopSys 2012-04-21 14:20:10

您假定文本框中的值自动传递给函数checkName。我相信这是你的错误。

您可以使用event.srcElement.value参考功能checkName中文本框中的值。

来源

2012-04-20 21:24:56

我不明白它：\ – SeinopSys 2012-04-21 06:21:31

这里是一个可能的解决方案：http://jsfiddle.net/QJG5R/1/

代码转储：

var input = document.getElementById('blar'); 
var highlights = { 
    'v':'#888888', 
    'va':'#666699', 
    'val':'#4444aa', 
    'valu':'#2222bb', 
    'value':'#0000cc',  
    'value1':'#ff0000', 
    'value2':'#00ff00' 
}; 
input.addEventListener('keyup', function(){ 
    var value = input.value; 
    if (highlights[value]) { 
     input.style.color = highlights[value]; 
    } else { 
     input.style.color = 'black'; 
    }  
});

HTML中包含一个元素： <input id='blar' type='text' />

来源

2012-04-20 21:25:24 david

它应该是'input.addEventListener（....' – SenorAmor 2012-04-20 21:32:58

的确应该更正。 – david 2012-04-20 22:01:15

这对我不起作用，不过谢谢！ – SeinopSys 2012-04-21 06:18:21

检查表单输入的文本并更改它的颜色

回答

相关问题