javascript - フォーム入力のテキストのチェックと色の変更

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

Answer 3

テキスト ボックスの値が関数 checkName に自動的に渡されると仮定します。これはあなたの間違いだと思います。

checkNameを使用して、関数内のテキスト ボックスの値を参照できますevent.srcElement.value。

Answer 4