Изменение цвета текста/шрифта на основе ввода пользователя

Question

Я пытаюсь создать код JavaScript, который определяет пользователей, вводимых в текстовое поле.

Если пользователь вводит, например, слово «тест», я хочу, чтобы цвет текста/шрифта менялся на зеленый.

Любой другой текст, который вводит пользователь (например, «tes», «test1», «testlm», «biscuit» и т. Д.), Должен изменить цвет текста/шрифта на красный.

Я пробовал несколько способов сделать это безрезультатно. Обратите внимание, что я являюсь абсолютным новичком с JavaScript, и я «играю» с кодом, чтобы помочь мне изучить его. Поэтому, если код грязный или совершенно неправильный, я приношу свои извинения за недостаток знаний.

Вот код JavaScript для первого теста:

<script type="text/javascript"> 
function checkKey() { 
var plaintext = document.getElementById("textbox"); 
var correct = input.style.color = '#66CD00'; 
var incorrect = input.style.color = '#FF0000'; 

if(plaintext =='test') 
    { 
     document.getElementById("textbox").innerHTML = correct; 
} 
else 
    { 
     document.getElementById("textbox").innerHTML = incorrect; 
    } 

}; 
</script> 

И HTML код для текстового поля:

<input type="text" id="textbox" name="plaintext" onKeyDown="checkKey()"> 

Второй тест является таким же, как первый, с той лишь разницей, в Код JavaScript является неправильным элементом «var correct» и «var wrong»:

var correct = str.fontcolor("green"); 
var incorrect = str.fontcolor("red"); 

Оба теста не работают. Я даже забрал скобки в коде HTML текстовое поле для OnKeyDown атрибута для обоих тестов:

<input type="text" id="textbox" name="plaintext" onKeyDown="checkKey"> 

Что опять не работает.

Мне было интересно, есть ли способ достичь моего вышеупомянутого желаемого результата? Я сделал что-то в своем экспериментальном коде?

Заранее благодарим за ваше время (и извините за длинный вопрос).

Answer 1

Ниже приведен пример, чтобы выполнить первоначальный запрос. Я отредактирую этот ответ в нескольких, чтобы дать вам несколько указаний относительно вашего кода.

https://jsfiddle.net/h05hgf3g/2/

JS

function checkKey() { 
var plaintext = document.getElementById("textbox"); 
if(plaintext.value != 'test') { 
    plaintext.style.color = "#FF0000"; 
} 
else { 
    plaintext.style.color = "#66CD00"; 
} 
} 

HTML

<input type="text" id="textbox" name="plaintext" onKeyUp="checkKey()"> 

Что касается вашего кода:

<script type="text/javascript"> 
function checkKey() { 
var plaintext = document.getElementById("textbox"); 

Здесь вы объявляете открытый текст как объект с идентификатором textbox. Позже вы снова используете команду document.getElementById также для textbox. Поскольку вы поместили этот объект в переменную plaintext, вы можете просто вернуться к нему, как plaintext двигаться вперед. Помните, что переменные, объявленные внутри функции, живут только внутри этой функции, если они объявлены с помощью var.

var correct = input.style.color = '#66CD00'; 
var incorrect = input.style.color = '#FF0000'; 

Вы не можете использовать = дважды в заявлении, как и выше

if(plaintext =='test') 

plaintext является переменной, которая в настоящее время хранения вводимый объект как целое. Если вы проверите его значение на самом высоком уровне, вы увидите, что это: [Object HTML INPUT Element]. Следовательно, сам объект никогда не будет равным чему-либо помимо этого. Если вы ищете value, что этот объект в настоящее время сохраняется, мы используем .value.

{ 
     document.getElementById("textbox").innerHTML = correct; 

Вот где мы можем использовать нашу plaintext переменную вместо вызова document.getElementById снова. Поэтому мы переключаем это на plaintext, а затем мы хотим назначить value этого объекта другого цвета.

} 
else 
    { 
     document.getElementById("textbox").innerHTML = incorrect; 
    } 

}; 
</script> 

В сводке:

Вы прочь к хорошему началу, и если вы написали, что код размещен, хотя это технически неточное, она показывает признаки пытаются выяснить решения о том, как делать вещи. Отсюда всевозможные вещи, которые вы можете сделать с помощью этого крошечного примера, чтобы изложить его и сделать его более динамичным.

Возможные вещи приплюсовать/думать о:

• Что происходит, когда пользователь пишет «Test» вместо «тест»
• Что делать, если у вас есть 4 поля ввода, которые вы хотите следовать все те же правила окраски? Вам нужно сделать 4 отдельных функции, по 1 для каждого? Или вы можете использовать одну и ту же функцию для управления всеми 4 входами?
• Как насчет того, чтобы выбрать цвет, который он выбирает?

Answer 2

<input type="text" id="textbox" name="plaintext" onkeyup="checkKey();"> 
<script> 
function checkKey() { 
    if(document.getElementById("textbox").value ==='test') 
    { 
     document.getElementById("textbox").style.color = "#00FF00"; 
    } 
    else 
    { 
     document.getElementById("textbox").style.color = "#FF0000"; 
    } 
} 
    </script> 

Проверить этот код.