Javascript 强制焦点保持在表单文本元素上，直到值为数字_Javascript

Javascript 强制焦点保持在表单文本元素上，直到值为数字

javascript

Javascript 强制焦点保持在表单文本元素上，直到值为数字,javascript,Javascript,我有一个表单，它的输入字段只需要数字我使用javascript在字段值更改时验证表单。如果该值是数值，则不执行任何操作如果该值不是数字，则将其设置为零，并将焦点放在该文本字段中。从本质上讲，我试图将光标捕捉到该字段中，直到输入一个数值。由于一些未知的原因，焦点没有放在表单元素上cell.focus（）不起作用。我甚至尝试了document.getElementById（cel.getAttribute（“ID”））.focus（）我可能做错了什么 <html>

我有一个表单，它的输入字段只需要数字

我使用javascript在字段值更改时验证表单。如果该值是数值，则不执行任何操作

如果该值不是数字，则将其设置为零，并将焦点放在该文本字段中。从本质上讲，我试图将光标捕捉到该字段中，直到输入一个数值。由于一些未知的原因，焦点没有放在表单元素上

cell.focus（）

不起作用。我甚至尝试了

document.getElementById（cel.getAttribute（“ID”））.focus（）我可能做错了什么
<html>        
<head>
    <script>
        function NAN(cell){
          if (cell.value != "") {
              var re = /^(0|[1-9][0-9]*)$/;
               if (re.test(cell.value) == false) {
                 alert('You must supply a numeric value greater than 0.');
                 cell.value = "0";
             cell.focus();

           }
          }
        }
    </script>
</head>

<body>
<input type="text" name="num" value="" onchange="NAN(cell)"/>
</body>
</html>


函数NAN（单元）{
如果（cell.value！=“”）{
var re=/^（0 |[1-9][0-9]*）$/；
如果（重新测试（单元格值）=假）{
警报（'您必须提供大于0的数值'）；
cell.value=“0”；
cell.focus（）；
}
}
}
有两件事要做：

您必须使用onchange将单元格更改为该单元格
根据这一点，至少在Firefox中，setTimeout必须包装此focus方法，以使其按预期工作

在第二个输入字段中也插入了一种更为用户友好的方法
希望此示例能帮助您：

函数NAN（单元）{
如果（cell.value！=''）{
var re=/^（0 |[1-9][0-9]*）$/；
cell.value=cell.value[0]='0'？+cell.value:cell.value；
如果（重新测试（单元格值）=假）{
警报（'您必须提供大于0的数值'）；
cell.value='0'；
setTimeout（函数（）{
cell.select（）；
cell.focus（）；
}, 0); 
}
}
}
/*
*更方便用户的方法
*/
功能NAN2（细胞）{
如果（cell.value！=''）{
var re=/^（0 |[1-9][0-9]*）$/；
cell.value=cell.value[0]='0'？+cell.value:cell.value；
如果（重新测试（单元格值）=假）{
警报（'您必须提供大于0的数值'）；
cell.value='0'；
setTimeout（函数（）{
cell.select（）；
cell.focus（）；
标记元素（细胞）；
}, 0); 
}
否则{
元素（细胞）；
}
}
}
功能单元（单元）{
setAttribute（'style'，'border:1px纯绿色'）；
}
函数标记元素（单元）{
cell.setAttribute（'style'，'border:1px实心红色'）；
}

您的方法（onchange）：


或者，您可以使用更为用户友好的方法，在用户提示错误时立即通知用户（onkeyup）：
有两件事要做：

您必须使用onchange将单元格更改为该单元格
根据这一点，至少在Firefox中，setTimeout必须包装此focus方法，以使其按预期工作

在第二个输入字段中也插入了一种更为用户友好的方法
希望此示例能帮助您：

函数NAN（单元）{
如果（cell.value！=''）{
var re=/^（0 |[1-9][0-9]*）$/；
cell.value=cell.value[0]='0'？+cell.value:cell.value；
如果（重新测试（单元格值）=假）{
警报（'您必须提供大于0的数值'）；
cell.value='0'；
setTimeout（函数（）{
cell.select（）；
cell.focus（）；
}, 0); 
}
}
}
/*
*更方便用户的方法
*/
功能NAN2（细胞）{
如果（cell.value！=''）{
var re=/^（0 |[1-9][0-9]*）$/；
cell.value=cell.value[0]='0'？+cell.value:cell.value；
如果（重新测试（单元格值）=假）{
警报（'您必须提供大于0的数值'）；
cell.value='0'；
setTimeout（函数（）{
cell.select（）；
cell.focus（）；
标记元素（细胞）；
}, 0); 
}
否则{
元素（细胞）；
}
}
}
功能单元（单元）{
setAttribute（'style'，'border:1px纯绿色'）；
}
函数标记元素（单元）{
cell.setAttribute（'style'，'border:1px实心红色'）；
}

您的方法（onchange）：


或者，您可以使用更为用户友好的方法，在用户提示错误时立即通知用户（onkeyup）：
您的问题在于onchange
属性：
<input type="text" name="num" value="" onchange="NAN(cell)"/>


还需要注意的是，您应该记住，此验证需要执行JavaScript。如果它被禁用，用户可能仍然会传递任何值，因此您也应该检查值服务器端（假设这不仅仅是客户端代码）
作为使用JavaScript的替代方法，您可以使用HTML5强制输入特定的模式。在这种情况下，这样做很简单：
<input type="text" name="num" value="" pattern="(?!0)\d+" title="Quantity">



除非模式得到验证，否则用户将无法提交表单，因此无需强制输入焦点。模式始终必须从开始到结束匹配完整值。title
属性通常用于在错误弹出窗口中提供更多信息。
您的问题在于onchange
属性：
<input type="text" name="num" value="" onchange="NAN(cell)"/>


还需要注意的是，您应该记住，此验证需要执行JavaScript。如果它被禁用，用户可能仍然会传递任何值，因此您也应该检查值服务器端（假设这不仅仅是客户端代码）
作为使用JavaScript的替代方法，您可以使用HTML5强制输入特定的模式。在这种情况下，这样做很简单：
<input type="text" name="num" value="" pattern="(?!0)\d+" title="Quantity">



除非模式得到验证，否则用户将无法提交表单，因此无需强制输入焦点。模式始终必须从开始到结束匹配完整值。title
属性通常用于在错误弹出窗口中提供更多信息。
您的代码示例有错误，请尝试将其作为NAN的参数。如果我理解你的意思，那么它是一个很好的突兀的用户体验