Question

我有HTML输入字段，只需要将输入限制为数字，并在用户点击或切换到字段时将字段设置为覆盖模式（文本突出显示）。

我似乎可以做其中一个，但不能同时做两个。

<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();
});

输入的是一组初步数字，然后有人返回并更正它们。如果他们只是选中并输入新数字而不首先突出显示它会很好。

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/

Answer 2

您可以使用 oninput 和 onfocus 事件：

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

$(".numOnly").on('focus', function(){
    $(this).select();
});

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

2 个答案: