javascript - 限制输入字段中的字符

Question

有没有办法阻止用户在输入字段中输入特定字符？我尝试了下面的代码，但是当用户输入不允许的字符时，它们会出现一小段时间然后消失。我希望在写入无效字符时输入保持不变。

我想使用onchange，因为其他的限制方法在移动设备上似乎不起作用。我要解决的问题是字符在被删除之前短暂出现。

function checkInput(ob) {
  const invalidChars = /[^0-9]/gi;

  if(invalidChars.test(ob.value)) {
    ob.value = ob.value.replace(invalidChars, "");
  }
};

<input class="input" maxlength="1" onChange="checkInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off" />

Answer 1

你可以试试这个，

$('.input').keyup(function () {
    if (!this.value.match(/[0-9]/)) {
        this.value = this.value.replace(/[^0-9]/g, '');
    }
});

SEE THIS FIDDLE DEMO

更新:

你可以试试这个代码，

$(document).ready(function() {
    $(".input").keydown(function (e) {
        // Allow: backspace, delete, tab, escape and enter
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
});

SOURCE

SEE UPDATED FIDDLE DEMO

Android 更新:

<EditText
android:id="@+id/editText1"
android:inputType="number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_marginTop="58dp"
android:layout_toRightOf="@+id/textView1"
android:maxLength="1" >
</EditText>

我认为它可以帮助你......使用 android:inputType="number" 你可以做到这一点。