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

Checking form input for text and changing it's color

本文关键字：颜色 文本 检查表 表单 输入 检查      更新时间：2023-09-26

在这里，我有一个无法克服的问题。这是代码，我希望脚本在输入的文本更改时更改表单输入的颜色：

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切换）我只是无法让它工作，所以我可以有多种选择何时更改颜色，也可以在语句无效时更改回来。有什么帮助吗？

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

举个例子。

您也可以尝试onkeyup，如此示例。

试试这个：

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

希望这有帮助！

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

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

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

相关文章：