javascript - Checking form input for text and changing it's color - Stack Overflow

admin管理员组

文章数量:1310325

Here I have a problem which I can't get over with. This is the code and I want the script to change the form input's color when the entered text changes:

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

As you can see when the entered text matches with one of the provided ones, it should turn orange, and when not, it shall be black. (I have an input toggling this function with an onChange thing) I just can't make it work so I can have multiple choices on when to change color, and also change back when the statement bees invalid. Any help?

Here I have a problem which I can't get over with. This is the code and I want the script to change the form input's color when the entered text changes:

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

As you can see when the entered text matches with one of the provided ones, it should turn orange, and when not, it shall be black. (I have an input toggling this function with an onChange thing) I just can't make it work so I can have multiple choices on when to change color, and also change back when the statement bees invalid. Any help?

• javascript
• html
• forms
• validation

Share Improve this question Follow edited Aug 29, 2013 at 10:30 Ozzy 8,32277 gold badges5757 silver badges9696 bronze badges asked Apr 20, 2012 at 21:15 SeinopSysSeinopSys 8,9371010 gold badges6565 silver badges114114 bronze badges 2

• Can you post your full code, please, perhaps in a jsFiddle? – SenorAmor Commented Apr 20, 2012 at 21:19
• I haven't really read any source material to verify this, but shouldn't you be passing an integer to document.forms[] rather than a string 'un'? – David Thomas Commented Apr 20, 2012 at 21:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I have an input toggling this function with an onChange thing so your Input

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

and function could be

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.

You may also try onkeyup like this example.

Try this instead:

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

Then in your CSS file:

.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;
}

Now that you have predefined CSS styles of the input boxes, everytime you check the input box you can set it to the appropriate CSS class name.

Now all you have to do is this:

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

Hope this helps!

You assume that the value in the textbox is automatically passed in to the function checkName. I believe that this is your mistake.

You can refer to the value in the textbox within your function checkName using event.srcElement.value.

Here is one possible solution: http://jsfiddle/QJG5R/1/

Code dump:

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 contains a single element: <input id='blar' type='text' />​

本文标签： javascriptChecking form input for text and changing it39s colorStack Overflow