Jquery:在按键时过滤输入
Jquery: filter input on keypress
我有一个文本字段,它只接受以下字符:
允许的字符:[a-z 0-9 + # - .]
这与SO在您提问时在"标签"字段中执行的过滤器相同。如果用户键入无效字符,我希望当前文本字段值保持不变。我试过了:
$('#post_tags').keypress(function(event){
var char = String.fromCharCode(event.which)
var txt = $(this).val()
if (! txt.match(/[^A-Za-z0-9+#-'.]/)){
$(this).val(txt.replace(char, ''));
}
})
为什么它不起作用?谢谢!
这对我有用:
$(function(){
$('#t').keypress(function(e){
var txt = String.fromCharCode(e.which);
console.log(txt + ' : ' + e.which);
if(!txt.match(/[A-Za-z0-9+#.]/))
{
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="t" />
/[^A-Za-z0-9+#-'.]/
这将否定这些字符中的任何一个的匹配。要使其匹配多个字符,您必须在其中使用+
:
/[^A-Za-z0-9+#-'.]+/
^
现在要匹配整个字符串,您需要添加锚点:
/^[^A-Za-z0-9+#-'.]+$/
^ ^
编辑:好的,似乎这里的-
也在创建从字符#
到.
的范围。在这种情况下,您可以对其进行转义,也可以将其放在末尾:
/^[^A-Za-z0-9+#'-'.]+$/
/^[^A-Za-z0-9+#'.-]+$/
你不需要
替换字符,只需要阻止它。
var char = String.fromCharCode(event.which)
if (!char.match(/^[^A-Za-z0-9+#'.'-]+$/)) event.preventDefault();
替代解决方案
可能会有所帮助的一件事是改用.which
字段。然后在不适合时简单地返回 false。我实际上有一个巨大的对象,里面装满了适用于所有主要浏览器的 .what 信息。它包括可以从中借用的数组来创建类似的东西:
var alphaNumericNcontrols = [ 8,9,13,16,17,18,19,20,32,33,34,35,36,37,38,39,40,44,45,46,145,48,49,50,51,52,53,54,55,56,57,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,96,97,98,99,100,101,102,103,104,105 ],
illegal = {
reg: [ 106,111,191,220 ],
shift: [ 56,59,188,190,191,220,222 ]
}
$(document).on("keydown", "input[type=text]", function(e) {
var eKey = e.which || e.keyCode;
if (alphaNumericNcontrols.indexOf(eKey) === -1) return false;
if (illegal.reg.indexOf(eKey) > -1) return false;
if (e.shiftKey && illegal.shift.indexOf(eKey) > -1) return false;
});
在此处查看工作示例
请记住,我的对象并不完美,我可能需要对其进行一些更新,但我尽了最大努力从每个可能的主要浏览器建立所有内容!
谢谢大家。
实际上我的问题有点困难:过滤无效键并以 2 种不同的方式启动对有效键的 ajax 调用:如果用户按空格/逗号或他/她还在键入。代码如下:
$(document).ready(function(){
$('#post_tags').keypress(function(e){
var txt = String.fromCharCode(e.which);
console.log(txt + ' : ' + e.which);
if(txt.match(/^[^A-Za-z0-9+#'-'.]+$/))
{
return false;
}
})
$('#post_tags').keyup(function(event){
code = event.which
var token = String.fromCharCode(code)
var txt = $(this).val()
//create a new tag, take it out of textfield
if (code == 32 || code == 188)
{
console.log("AJAX new word keyup")
$.ajax({
type: 'get',
url: '/posts/tags_change',
dataType: "json",
data: "query=" + $(this).val(),
success: function(data) {
console.log(data)
$('#post_tags').val('')
},
error: function(data) {
alert("Ajax error")
}
});
}
else
{
//do autocomplete ajax
console.log("typing:" + txt)
}
});
}(
不知道这是否是100%正确的!
相关文章:
- 根据复选框输入过滤深层对象
- 使用jQuery过滤两种输入类型
- 过滤父对象时,输入将丢失其值
- 根据用户输入的leaflet.js过滤标记
- 按输入日期过滤 ng 重复
- Javascript - 使用文本输入框过滤数据
- 使用输入框过滤剑道网格
- KnockoutJS - 过滤用户输入
- JQuery - 使用不同输入的多个筛选器过滤数据属性
- 过滤文本输入 JavaScript
- AngularJS - 通过 3 个选择输入过滤数组
- 如何过滤文件输入,使其仅显示一种类型的文件
- JavaScript 函数检索输入 [type=number] 并根据值过滤它们
- 根据图像标题的搜索输入过滤图像
- Javascript 通过匹配输入来过滤字符串
- 使用d3在类型上过滤输入形式
- 如何过滤输入类型=“;文件“;对话框
- Jquery:在按键时过滤输入
- 如何获取输入字段,根据一组规则过滤输入并应用于另一个字段
- 按值过滤输入