限制输入字段中的字符

检查此代码，

$('.input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});

​

这里有一个你可以尝试的小技巧：演示

它的作用是将每个输入文本涂成白色，然后根据您的要求将其改回黑色。如果您可以忍受输入有效字符时出现的一点延迟。

function checkInput(ob) {
    var invalidChars = /[^0-9]/gi
    if (invalidChars.test(ob.value)) {
        ob.value = ob.value.replace(invalidChars, "");
    }
    else {
        document.getElementById('yourinput').style.color = '#000';
    }
};

function hideInput(ob) {
    document.getElementById('yourinput').style.color = '#FFF';
};

[HTML全文]

<input id="yourinput" class="input" maxlength="1" onKeydown="hideInput(this)" onKeyup="checkInput(this)" type="text" autocomplete="off" />

CSS的

input {color:#FFF;}

按键和粘贴事件的组合可以做一个技巧：

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/

你可以用试试这个，

$('.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"

<input id="testInput"></input>

<script>
testInput.onchange = testInput.oninput = restrict;

function restrict() {
    testInput.value = testInput.value.replace(/[^a-z]/g, "");
}
</script>

我想出了一些稍微不同的东西。oninput 而不是 onkeyup/onkeydown，onchange 而不是 onpaste。

我在按键和粘贴事件上限制无效字符，例如：

<input type="text" onkeydown="validateKey(event)" onpaste="validatePaste(this, event)">  

并在选项卡或单独的 javascript 文件中定义函数来处理这些事件：

<script>
function validateKey(e) {
  switch(e.keyCode) {
    case 8,9,13,37,39:
      break;
    default:
      var regex = /[a-z .'-]/gi;
      var key = e.key;
      if(!regex.test(key)) {
        e.preventDefault();
        return false;
      }
      break;
  }
}
function validatePaste(el, e) {
  var regex = /^[a-z .'-]+$/gi;
  var key = e.clipboardData.getData('text')
  if (!regex.test(key)) {
    e.preventDefault();
    return false;
  }
}
</script>

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

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 属性来显示解释预期格式的工具提示。
• 安全：这是客户端验证，不保证在将表单发送到服务器时强制执行该模式。为此，您需要服务器端验证。