Question

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

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事物）我只是无法使它工作，所以我可以有多个选择何时更改颜色，并在语句变为无效时更改回来。有什么帮助吗？

Answer 1

请改为尝试：

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

希望这有帮助！

Answer 2

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尝试{{1}}。

Answer 3

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

您可以使用checkName在功能event.srcElement.value中的文本框中引用该值。

Answer 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' />

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

4 个答案: