有没有办法阻止用户在输入字段中写入特定字符?我尝试了下面的代码,但是当用户输入不允许的字符时,它们会出现一小段时间,然后消失。我希望在写入无效字符时输入保持不变。我想使用onchange,因为其他限制方法似乎在移动的设备上不起作用。我想解决的问题是字符在被删除之前短暂出现。第一个
onchange
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"你可以做到这一点。
android:inputType="number"
qc6wkl3g2#
组合使用按键和粘贴事件会产生一种效果:第一个这段代码禁止输入或粘贴除数字以外的任何内容,也不会显示闪烁和无效字符。适用于IE7+。
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;}
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(); });
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。
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>
fxnxkyjh7#
到目前为止给出的所有答案都至少存在以下可访问性问题之一:1.它们会验证键码,但不适用于非QWERTY键盘布局。1.它们并不涵盖所有输入法;尤其是拖放常常被遗忘。1.它们会改变value,从而重置插入符号的位置。1.它们使用pattern属性,但在提交表单之前,这不会提供反馈。在插入之前验证输入不是更好吗?beforeinput事件在输入值更改 * 之前 * 触发。该事件具有data属性,该属性描述用户要添加到输入字段的内容。在事件处理程序中,您只需检查data属性,如果它包含不允许的字符,则停止事件链。最后我们得到了下面非常简单、非常短的代码。第一个结束语:
value
pattern
beforeinput
data
***辅助功能:**提供用户期望的输入格式的清晰说明。例如,您可以使用输入的title属性来显示工具提示,说明期望的格式。***安全性:**这是客户端验证,并不保证表单传送到服务器时会胁迫执行此模式。因此,您需要服务器端验证。
title
7条答案
按热度按时间yebdmbv41#
你可以试试这个,
更新日期:
你可以试试这个代码,
SOURCE
已针对安卓更新:
我想它可能会帮助你...使用
android:inputType="number"
你可以做到这一点。qc6wkl3g2#
组合使用按键和粘贴事件会产生一种效果:
第一个
这段代码禁止输入或粘贴除数字以外的任何内容,也不会显示闪烁和无效字符。
适用于IE7+。
演示:http://jsfiddle.net/VgtTc/3/
mbjcgjjk3#
这里有一个你可以尝试的小技巧:DEMO
它所做的是将每个输入文本都涂成白色,然后如果符合您的要求,则将其改回黑色。如果您能忍受输入有效字符时出现的一点滞后,那么它将是一个很好的选择。
超文本标记语言
CSS
umuewwlo4#
检查此代码,
tez616oj5#
我想出了一些稍微不同的东西。oninput代替了onkeyup/onkeydown,onchange代替了onpaste。
rkkpypqq6#
我限制了按键和粘贴事件中的无效字符,例如:
并在选项卡或单独的JavaScript文件中定义处理这些事件的函数:
fxnxkyjh7#
到目前为止给出的所有答案都至少存在以下可访问性问题之一:
1.它们会验证键码,但不适用于非QWERTY键盘布局。
1.它们并不涵盖所有输入法;尤其是拖放常常被遗忘。
1.它们会改变
value
,从而重置插入符号的位置。1.它们使用
pattern
属性,但在提交表单之前,这不会提供反馈。在插入之前验证输入不是更好吗?
beforeinput
事件在输入值更改 * 之前 * 触发。该事件具有data
属性,该属性描述用户要添加到输入字段的内容。在事件处理程序中,您只需检查data
属性,如果它包含不允许的字符,则停止事件链。最后我们得到了下面非常简单、非常短的代码。
第一个
结束语:
***辅助功能:**提供用户期望的输入格式的清晰说明。例如,您可以使用输入的
title
属性来显示工具提示,说明期望的格式。***安全性:**这是客户端验证,并不保证表单传送到服务器时会胁迫执行此模式。因此,您需要服务器端验证。