根据用户输入更改 text/font 颜色

Question

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

如果用户输入，例如 'test'，我希望 text/font 颜色变为绿色。

用户输入的任何其他文本（例如 'tes'、'test1'、'testlm'、'biscuit' 等）应更改 text/font颜色为红色。

我试过多种方法都没有用。 请注意，我是 JavaScript 的绝对初学者，而且我 'playing around' 有代码可以帮助我学习它。因此，如果代码乱七八糟或完全错误，还请见谅。

这是第一个测试的 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");

Here you declare plaintext as the object with the Id textbox. Later on, you use the whole document.getElementById command again also for textbox. Since you have put this object into the variable plaintext, you can just refer back to it as plaintext moving forward. Keep in mind variables declared inside of a function only live inside that function if they are declared with var.

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

You are not able to use = twice in a statement like above

if(plaintext =='test')

plaintext is a variable which is currently storing the input object as whole. If you check it's value at the highest level you will see that is it: [Object HTML INPUT Element]. Therefore, the object itself will never equal anything besides that right there. If you are looking for the value that this object is currently retaining, we use .value.

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

Here is where we can reuse our plaintext variable instead of calling document.getElementById again. So we switch that to plaintext and then we want to assign the value of this object a different color.

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

};
</script>

总结：

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

可能要添加的内容 on/think 关于：

当用户写 'Test' 而不是 'test'
如果您有 4 个输入框要遵循所有相同的着色规则怎么办？您是否需要制作 4 个独立的功能，每个功能 1 个？或者您可以重复使用同一个函数来管理所有 4 个输入吗？
让用户 select 颜色 he/she 选择怎么样？

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>

检查此代码。

根据用户输入更改 text/font 颜色

Change text/font colour based on user input

javascript

html

onkeydown