javascript - html 输入 - 仅数字和覆盖模式

Question

我有 HTML 输入字段，需要将输入限制为仅数字，并在用户单击或按 Tab 键切换到字段时将字段设置为覆盖模式(文本突出显示)。

我似乎能够做其中之一，但不能同时做这两件事。

<input type="text" class="numOnly" value="10"> 
    <input type="text" class="numOnly" value="20"> 
        <input type="text" class="numOnly" value="30"> 
            <input type="text" class="numOnly" value="40"> 
<input type="text" class="numOnly" value="50"> 
    <input type="text" class="numOnly" value="60"> 
        <input type="text" class="numOnly" value="70"> 
            <input type="text" class="numOnly" value="80">   

$('.jqndo').keyup(function () {
    this.value = this.value.replace(/[^0-9\.-]/gi, "");
});

$(".jqndo").focusin(function(){
    $(this).select();
}); 

发生的情况是输入一组初步数字，然后有人返回并更正它们。如果他们可以直接按 Tab 键浏览并输入新数字而不先突出显示，那就太好了。

JSfiddle

Answer 1

您应该在所有要编号的输入标记中使用 type="number"。

并拒绝非数字字符使用:

$(".numOnly").keypress(function(key){
    if(key.charCode < 48 || key.charCode > 57) return false;
});

而不是

$(".numOnly").keyup(function () {
    this.value = this.value.replace(/[^0-9\.-]/g, "");
});

Fiddle link

引用:http://www.webdesignerdepot.com/2012/10/restricting-input-with-jquery/