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

Я пытаюсь создать некоторый код 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 correct':

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

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

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

Что снова не сработало.

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

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


javascript html onkeydown
person camzenxbt    schedule 20.08.2015    source источник
comment
Проверьте эту тему Джеймс: stackoverflow.com/questions/16625618/   -  person AndrewL64    schedule 21.08.2015

Ответы (2)


arrow_upward
1
arrow_downward

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

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>

Вкратце:

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

Что можно добавить/подумать:

  • Что происходит, когда пользователь пишет «Тест» вместо «тест»
  • Что, если у вас есть 4 поля ввода, которым вы хотите следовать одинаковым правилам раскраски? Вам нужно сделать 4 отдельные функции, по 1 на каждую? Или вы можете повторно использовать одну и ту же функцию для управления всеми четырьмя входами?
  • Как насчет того, чтобы пользователь выбирал цвет, который он/она выбирает?
person mrlemmer11    schedule 20.08.2015
comment
Этот ответ превосходен! По общему признанию, я не писал код с нуля — вместо этого я использовал фрагменты кода из множества ответов на вопросы на этом веб-сайте и других сайтах, и настраивал их части, чтобы попытаться достичь моей вышеупомянутой цели (отсюда и два похожих теста с разными значениями в 'var correct' и 'var correct' части моих кодов JavaScript). Ваш ответ был очень обстоятельным и информативным, и уже многому меня научил! Большое спасибо за ваше время! - person camzenxbt; 21.08.2015
comment
Без проблем. Я сам новичок в JS, и мне нравится делиться теми небольшими знаниями, которые у меня есть, с другими. Это действительно удивительно, что вы можете создать, когда продолжаете изучать новые вещи. Наилучшие пожелания вам. - person mrlemmer11; 21.08.2015

arrow_upward
0
arrow_downward 

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

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

person Sailesh Babu Doppalapudi    schedule 20.08.2015