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 incorrect'部分：

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>

摘要：

你有一个好的开始，如果你写了你发布的代码，虽然它在技术上是不准确的，但它确实显示出试图找出如何做事的解决方案的迹象。从这里开始，你可以用这个小小的例子做各种各样的事情来阐述它并使它更有活力。

可以添加/思考的事情：

当用户写“测试”时会发生什么？而不是＆＃39; test＆＃39;
如果您有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>

检查此代码。

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

2 个答案: