jquery 限制输入字段中的字符

h7appiyu  于 2022-11-29  发布在  jQuery
关注(0)|答案(7)|浏览(184)

有没有办法阻止用户在输入字段中写入特定字符?我尝试了下面的代码,但是当用户输入不允许的字符时,它们会出现一小段时间,然后消失。我希望在写入无效字符时输入保持不变。
我想使用onchange,因为其他限制方法似乎在移动的设备上不起作用。我想解决的问题是字符在被删除之前短暂出现。
第一个

yebdmbv4

yebdmbv41#

你可以试试这个,

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

更新日期:

你可以试试这个代码,

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


已针对安卓更新:

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

qc6wkl3g

qc6wkl3g2#

组合使用按键和粘贴事件会产生一种效果:
第一个
这段代码禁止输入或粘贴除数字以外的任何内容,也不会显示闪烁和无效字符。
适用于IE7+。

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

mbjcgjjk

mbjcgjjk3#

这里有一个你可以尝试的小技巧: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';
};

超文本标记语言

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

CSS

input {color:#FFF;}
umuewwlo

umuewwlo4#

检查此代码,

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

tez616oj5#

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

rkkpypqq

rkkpypqq6#

我限制了按键和粘贴事件中的无效字符,例如:

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

fxnxkyjh7#

到目前为止给出的所有答案都至少存在以下可访问性问题之一:
1.它们会验证键码,但不适用于非QWERTY键盘布局。
1.它们并不涵盖所有输入法;尤其是拖放常常被遗忘。
1.它们会改变value,从而重置插入符号的位置。
1.它们使用pattern属性,但在提交表单之前,这不会提供反馈。
在插入之前验证输入不是更好吗?
beforeinput事件在输入值更改 * 之前 * 触发。该事件具有data属性,该属性描述用户要添加到输入字段的内容。在事件处理程序中,您只需检查data属性,如果它包含不允许的字符,则停止事件链。
最后我们得到了下面非常简单、非常短的代码。
第一个
结束语:

***辅助功能:**提供用户期望的输入格式的清晰说明。例如,您可以使用输入的title属性来显示工具提示,说明期望的格式。
***安全性:**这是客户端验证,并不保证表单传送到服务器时会胁迫执行此模式。因此,您需要服务器端验证。

相关问题