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

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

Answer 2

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

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/

Answer 3

在这里，您可以尝试一下：DEMO

它的作用是将每个输入文本着色为白色，然后根据您的要求将其更改为黑色。如果您可以忍受输入有效字符时出现的滞后现象。

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

Answer 4

<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。

Answer 5

检查此代码，

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

Answer 6

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

<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>

限制输入字段中的字符

6 个答案:

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