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

Question

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

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

用户输入的任何其他文本（例如“tes”、“test1”、“testlm”、“饼干”等）都应将文本/字体颜色更改为红色。

我尝试了多种方法，但均无济于事。 请注意，我是 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正确”和“var不正确”部分：

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 的对象。稍后，您对textbox 再次使用整个document.getElementById 命令。由于您已将此对象放入变量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>

检查此代码。