javascript - 在您键入时实时比较字母

Question

我想编写一个代码，以“实时”比较用户在输入框中与给定单词（即“house”）引入的世界。当写的字母正确时，整个单词为蓝色，当用户输入错误的字母时，单词变为红色。

这是html：

<input id='inputtype' onkeyup='return validateAsYouType(this);' />

编辑：解决了！这是解决方案：

<script type="text/javascript" >
function validateAsYouType(inputElementId)
{
var val = inputElementId.value;
var randomWord = "house";

if (val.length <= randomWord.length && val == randomWord.substr(0, val.length)) {
document.getElementById("inputtype").style.color="blue"; // If right, put it in blue
}

else { document.getElementById("inputtype").style.color="red"; // If wrong, put it in red
}

if( val == randomWord)
{
    document.getElementById("inputtype").style.color="#339933"; // If right, put it in green
}

}

Answer 1

检查输入的单词不长于给定的单词，并且到目前为止输入的单词与给定单词中的相应字母相同：

if (val.length <= randomWord.length && val == randomWord.substr(0, val.length))

当单词错误时，您还需要一个elseforif语句来更改颜色。

Answer 2

试试这个，

function validateAsYouType(inputElementId)
{
    var val = inputElementId.value;
    var randomWord = "house";

    var elem = document.getElementById("inputtype");

    if( val == randomWord)
    {
        elem.style.color="#339933"; // If right, put it in green
    }

    else
    {
        elem.style.color="blue"; //if wrong, put it in blue
    }

}

您的代码没有太多变化，只是else显示“实时”检查

测试链接

Answer 3

在检查整个单词是否正确的位下，从您的单词 (val和randomword) 中创建字符数组，然后循环遍历一个数组，将当前字符与另一个数组中的相同编号字符进行比较。

就像是：

for(int i = 0; i <= val.length; i++)
{
  if (valArr[i] != randomwordArr[i])
  document.getElementById("inputtype").style.color="#990000"; 
  return;
  next i;
}

如果有任何错误，则将字符串更改为红色，否则将其保留为原来的颜色。