如何使用jQuery阻止特殊字符被输入到输入框中？
如何使用jQuery阻止或限制特殊字符输入到输入字段？
151
- Nerd Stalker
1
1使用 jQuery Validation 插件，只允许输入字母和数字字符。 - Tomas Aschan
27个回答
154
一个简单的示例，使用正则表达式，你可以根据需求更改以允许/禁止任何内容。
$('input').on('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
- Dale
6
62这不适用于粘贴的文本，并且可能会阻止用户进行非文本按键操作，如退格键、箭头键等。 - bendytree
12这将禁止在Firefox浏览器中使用退格键。 - Alex
1不适用于西班牙语单词，如：avión（飞机），árbol（树）等。 - nikoskip
1它在最新的Firefox浏览器中不起作用，但在Chrome中运行良好。 - Phoenix
3这个解决方案适用于 Bootstrap-TagsInput 元素。为了解决粘贴问题，你可以在事件参数列表中简单地添加 "paste"，像这样：$('input').on('keypress, paste'', ()=>........ - Jim22150
1此解决方案不处理复制和粘贴带有无效字符的文本，但逐个按键输入有效。 - pixel
92
我正在寻找一种只允许字母数字字符输入，但仍然可以使用控制字符（例如，退格、删除、制表符）和复制+粘贴的答案。我尝试了所有提供的答案，但没有一个能满足所有要求，所以我通过使用input事件想出了以下解决方案。
$('input').on('input', function() {
$(this).val($(this).val().replace(/[^a-z0-9]/gi, ''));
});
编辑：
正如rinogo在评论中指出的那样，上面的代码片段会在输入文本中间键入时将光标强制移到输入框末尾。我认为下面的代码片段可以解决这个问题。
$('input').on('input', function() {
var c = this.selectionStart,
r = /[^a-z0-9]/gi,
v = $(this).val();
if(r.test(v)) {
$(this).val(v.replace(r, ''));
c--;
}
this.setSelectionRange(c, c);
});
- rexmac
7
3+1 我一直在浏览答案，寻找像这个一样的答案，否则我就会提交自己的答案。这个答案可以立即过滤掉任何不允许的字符！太棒了！ - Emil Hemdal
4可以，我会尽力进行翻译：+1适用于复制的文本，不会干扰浏览器的退格和删除键，也不依赖于"event.which"或"event.keycode"!但愿我能给出+10分！ - rinogo
4但是在Chrome和IE中，当你在输入文本的中间键入新字符或使用退格和删除键时，光标会移动到文本末尾... :/ 有没有简单的解决方法？我真的很希望这能够正常工作！ - rinogo
非常接近了...这段代码在Chrome移动版中的行为非常奇怪。光标在输入第一个字母时会跳来跳去，删除时也是如此。 - Juliano
3@Juliano 很有趣，似乎在Chrome Mobile上，无论光标/插入符号当前位于何处，selectionStart始终返回0。我还不确定这是一个错误还是预期行为。我目前正在研究这个问题，当我了解更多信息时，我会更新我的答案或在此处发表评论。 - rexmac
显示剩余2条评论
57
简短回答：阻止'keypress'事件：
$("input").keypress(function(e){
var charCode = !e.charCode ? e.which : e.charCode;
if(/* Test for special character */ )
e.preventDefault();
})
长答案: 使用像jquery.alphanum这样的插件。
在选择解决方案时有几个要考虑的因素:
- 粘贴文本
- 上面的代码可能会阻止控制字符，如退格键或F5。
- é, í, ä 等等
- 阿拉伯语或中文...
- 跨浏览器兼容性
我认为这个领域足够复杂，值得使用第三方插件。我试用了几个可用的插件，但每一个都存在问题，所以我写了jquery.alphanum。 代码看起来像这样：
$("input").alphanum();
或者，为了获得更精细的控制，可以添加一些设置：
$("#username").alphanum({
allow : "€$£",
disallow : "xyz",
allowUpper : false
});
希望对您有所帮助。
- KevSheedy
9
1太棒了，伙计，太棒了。我刚刚不得不添加一个选项来启用/禁用斜杠字符('/')，因为将其放入“允许”设置中时它无法工作。但这就是 jQuery 插件的美妙之处，你可以修改它们以适应你的需求。谢谢！ - Adrian Marinica
9太棒了！我继续编写了jquery.alphanum。 - Felix
这太棒了！唯一的问题是 - GitHub 上没有许可证 :( 某些项目会阻止使用许可状态未知的插件。 - zaitsman
我没有看到任何解释说明这个程序如何处理不同语言的字符。你能详细说明一下它是否支持像é、í、ä、阿拉伯或中文字符这样的字符吗？ - Crystal Miller
2大家似乎对此感到非常兴奋，但用户可以轻松地粘贴任何字符的文本，而这并不能防止这种情况发生。 - Jonathan Wood
显示剩余4条评论
31
使用简单的onkeypress事件内联。
<input type="text" name="count" onkeypress="return /[0-9a-zA-Z]/i.test(event.key)">- MOhammad.Isaac.Ahmadi
2
4请注意，
onkeypress现已被弃用，建议使用onkeydown。 - Thayne6这对于复制的文本将会失败。 - Architrixs
20
使用HTML5的模式输入属性！
<input type="text" pattern="^[a-zA-Z0-9]+$" />
- keepitreal
4
29这个解决方案可以防止不想要的字符被提交，但是它并不能防止不想要的字符被输入到输入框中。 - rexmac
4用户未使用 HTML5 浏览器的风险也存在。 - Captain Kenpachi
3从用户体验的角度来看，许多人比被限制输入更讨厌的是事后被告知输入错误。强制输入是为了减少错误消息和无效通知。 - Julix
2@Julix 这是一个具体问题。有些领域只能输入数字（价格或任何货币金额等），在这种情况下，听取字母字符输入是没有意义的。但是，我的解决方案并不是针对 OP 的问题，而是一种帮助 UX 问题的好方法。 - keepitreal
18
使用正则表达式允许/禁止任何字符。此外，为了比接受的答案稍微更强大一点，允许不带键值关联的字符（退格、制表符、箭头键、删除键等），可以首先通过按键事件传递并根据keycode而不是value检查键。
$('#input').bind('keydown', function (event) {
switch (event.keyCode) {
case 8: // Backspace
case 9: // Tab
case 13: // Enter
case 37: // Left
case 38: // Up
case 39: // Right
case 40: // Down
break;
default:
var regex = new RegExp("^[a-zA-Z0-9.,/ $@()]+$");
var key = event.key;
if (!regex.test(key)) {
event.preventDefault();
return false;
}
break;
}
});
- James Mart
3
这应该是最受赞的答案。大多数答案都没有考虑那些没有关联值的特殊字符。 - Alain Cruz
这并不能防止用户复制/粘贴恶意字符？ - Mike
这个很好用，但你仍然可以复制并粘贴无效字符到输入框中。 - pixel
15
您的文本框：
<input type="text" id="name">
您的 JavaScript 代码：
$("#name").keypress(function(event) {
var character = String.fromCharCode(event.keyCode);
return isValid(character);
});
function isValid(str) {
return !/[~`!@#$%\^&*()+=\-\[\]\\';,/{}|\\":<>\?]/g.test(str);
}
- chandler
2
@Bhargav Rao，我删除了另一个重复的帖子并重新发布了这个帖子，因为这个更合适，感谢您指出。 - chandler
2这种方法在复制和粘贴包含无效字符的文本时是无效的。 - pixel
13
请查看jQuery字母数字插件。https://github.com/KevinSheedy/jquery.alphanum
//All of these are from their demo page
//only numbers and alpha characters
$('.sample1').alphanumeric();
//only numeric
$('.sample4').numeric();
//only numeric and the .
$('.sample5').numeric({allow:"."});
//all alphanumeric except the . 1 and a
$('.sample6').alphanumeric({ichars:'.1a'});
- RSolberg
1
有没有针对字母的呢？通常我只对数字使用NaN（例如邮政编码或电话号码）。 - user9008566
5
这是一个防止用户输入字符“a”的示例。
$(function() {
$('input:text').keydown(function(e) {
if(e.keyCode==65)
return false;
});
});
这里提供按键代码参考：
http://www.expandinghead.net/keycode.html
- user434917
4
我认为，你不想允许的所有按键代码可能会让人难以管理。 - RSolberg
如果您想限制某人只能输入1到5的数字，那么您最终需要在代码中管理5个键码。 - RSolberg
2如果AlphaNumeric不适合您，这其实不是一个坏计划。我使用了switch/case语句使其起作用。以下示例禁止目录名称中不允许的字符：$('input[type='text'], textarea').keydown(function(ev){
switch(ev.keyCode){case 47: case 92: case 63: case 37: case 42: case 59: case 124: case 34: case 60: case 62: return false;};
}); - M Miller
1@user434917，当我在安卓手机的Chrome浏览器上测试你的代码时，它没有运行。你有什么解决办法吗？ - Pranesh Janarthanan
5
我使用这段代码对其他我看到的代码进行修改。只有在按键或粘贴文本通过模式测试（匹配）时才授权用户编写（此示例是仅允许8位数字的文本输入）。
$("input").on("keypress paste", function(e){
var c = this.selectionStart, v = $(this).val();
if (e.type == "keypress")
var key = String.fromCharCode(!e.charCode ? e.which : e.charCode)
else
var key = e.originalEvent.clipboardData.getData('Text')
var val = v.substr(0, c) + key + v.substr(c, v.length)
if (!val.match(/\d{0,8}/) || val.match(/\d{0,8}/).toString() != val) {
e.preventDefault()
return false
}
})
- Pablo Padron
2
为什么要使用
!e.charCode ? e.which : e.charCode 而不是简单地使用 e.charCode ? e.charCode : e.which？ - Massimiliano Kraus需要做哪些更改才能接受十进制数？ - ubm
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接