当js验证失败时，将光标自动放回错误的表单字段

Question

假设有一个名为txtphone的表单字段，然后用javascript检查它是否至少有10位数的长度。用户只输入5位数字，因此验证失败。我想让光标回到自动输入txtphone的位置，这样用户就不用再输入10位数字的电话号码了。这是一个例子。我不能让它回到输入字段上，如姓名，电子邮件等。在这个例子中的字段，如果失败，这就是我正在试图做到这一点：

txtphone.focus() 
txtphone.select() 
return False 

它显示了警报错误信息但重点放在下一个表单域。

请只回应，如果你有过去的这个问题，你解决了它，请给我几行实际工作代码。我已经打了几个星期，准备放弃。像“你试过......”这样的答案对我没有好处。谢谢。

Answer 1

我创建了一个JSFiddle，显示焦点方法应该如何工作，以找到你想要的东西。让我知道它是否有帮助。

JSFiddle

HTML

<input id="txtphone" type="text"> 

<button id="btn"> 
Click me! 
</button> 

的JavaScript

var txtphone = document.getElementById("txtphone"); 

var button = document.getElementById("btn"); 

button.addEventListener("click", function() { 
    if (txtphone.value.length < 10) { 
    txtphone.style.backgroundColor = "red"; 
    txtphone.focus(); 
    } else { 
    txtphone.style.backgroundColor = "white"; 
    } 
});