检查表单输入的文本并更改其颜色答案

【问题标题】：Checking form input for text and changing it's color检查表单输入的文本并更改其颜色
【发布时间】：2012-04-20 21:15:42
【问题描述】：

我遇到了一个无法解决的问题。这是代码，我希望脚本在输入的文本更改时更改表单输入的颜色：

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 东西切换这个功能的输入）我只是不能让它工作，所以我可以有多种选择何时改变颜色，并且当语句变得无效时也可以改变回来。有什么帮助吗？

【问题讨论】：

您能否发布您的完整代码，也许在 jsFiddle 中？
我还没有真正阅读任何源材料来验证这一点，但你不应该将整数传递给document.forms[]，而不是字符串'un'？

标签： javascript html forms validation

【解决方案1】：

I have an input toggling this function with an onChange thing 所以你的输入

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

功能可以是

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.

你也可以试试onkeyup，比如this example。

【讨论】：

【解决方案2】：

试试这个：

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);" />

希望这会有所帮助！

【讨论】：

我觉得有点太复杂了。
问题出在你的问题上，我无法正确地将你提供的代码放入我的页面中（可能是因为我刚刚开始进行网络编程），所以不要把这当成什么不好，另一个我接受了一段代码，我可以很容易地实现，但这并不意味着你的代码不好。 ;)

【解决方案3】：

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

您可以使用event.srcElement.value 引用函数checkName 中文本框中的值。

【讨论】：

【解决方案4】：

这是一种可能的解决方案：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' />

【讨论】：