根据用户输入更改文本/字体颜色

Question

我正在尝试构建一些JavaScript代码，以检测用户在文本框中的输入。

例如，如果用户输入单词“ test”，我希望文本/字体颜色变为绿色。

用户输入的任何其他文本（例如“ 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 = str.fontcolor("green");
var incorrect = str.fontcolor("red");

两项测试均无效。 我什至没有为两个测试的onKeyDown属性删除HTML文本框代码中的括号：

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

在这里，您使用Id 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个吗？ 还是可以重复使用同一功能来管理所有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>

检查此代码。