限制输入字段中的字符

Question

当用户在输入字段中输入时,是否有任何选项可以使用此代码而不显示字母或字符？这是我已经尝试过的代码,我想保留它,但是现在当我在输入中编写受限制的字符时,它会显示它们.我需要将输入留空

编辑:我不想更改代码,因为这在平板电脑上很有用(其他限制字符函数不会).唯一的问题是你按下受限制的字符会延迟

码:

function checkInput(ob){
    var invalidChars = /[^0-9]/gi
            if(invalidChars.test(ob.value)) {
                    ob.value = ob.value.replace(invalidChars,"");
          }
};

HTML:

<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

更新为安卓:

<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"你可以做到这一点.

Answer 2

到目前为止给出的所有答案至少都存在以下可访问性问题之一：

1. 它们验证键代码，这不适用于非 QWERTY 键盘布局。
2. 它们并未涵盖所有输入法；尤其是拖放操作经常被遗忘。
3. 他们改变value，从而重置插入符的位置。
4. 他们使用该pattern属性，但是在提交表单之前不会提供反馈。

在插入之前实际验证输入不是一个更好的主意吗？

该事件在输入值更改之前beforeinput触发。该事件有一个属性，描述用户想要添加到输入字段的内容。在事件处理程序中，您只需检查属性，如果包含不允许的字符，则停止事件链。datadata

我们最终得到以下非常简单、非常短的代码。

const input = document.getElementById("input");
const regex = new RegExp("^[0-9]*$");

input.addEventListener("beforeinput", (event) => {
  if (event.data != null && !regex.test(event.data)) 
    event.preventDefault();
});

<label for="input">Enter some digits:</label>
<input id="input" />

一些结束语：

• 辅助功能：清楚地解释用户期望的输入格式。例如，您可以使用输入的title属性来显示解释预期格式的工具提示。
• 安全性：这是客户端验证，不保证将表单发送到服务器时强制执行该模式。为此，您需要服务器端验证。

Answer 3

按键和粘贴事件的组合可以解决问题:

var text = document.getElementById('text');
text.onkeypress = text.onpaste = checkInput;

function checkInput(e) {
    var e = e || event;
    var char = e.type == 'keypress' 
        ? String.fromCharCode(e.keyCode || e.which) 
        : (e.clipboardData || window.clipboardData).getData('Text');
    if (/[^\d]/gi.test(char)) {
        return false;
    }
}

<input class="input" maxlength="10" id="text" type="text" autocomplete="off" />

此代码可防止输入或粘贴除数字之外的任何内容.此外,不会显示闪烁和无效字符.

适用于IE7 +.

演示:http://jsfiddle.net/VgtTc/3/