我对输入进行了一些“实时”验证的简单实现。允许的字符是低位和大写的alpha,0-9,连字符,句点,撇号和空格。该字段限制为15个字符。我在这里使用jQuery只是为了便于在我的例子中使用,它可能会也可能不会用于我的项目。
目前,当尝试使用箭头键在输入中放置/移动光标时,我总是将其带到字符串的末尾。尝试使用键(CTRL-A)选择所有文本时也会发生相同的情况。是否有更好的方法来实现我正在寻找的避免这种情况的方法?对我来说,这似乎是糟糕的用户体验。
$( '#sample' ).on( 'keyup', function( event ) {
var str = $( this ).val();
str = str.replace(/[^A-Za-z-0-9.'\s]/g, "").substring(0,15);
$( this ).val( str );
});
我还有一个jsFiddle设置here
答案 0 :(得分:3)
只有在实际更改时才更新输入值,大多数问题都可以预防。
$( '#sample' ).on( 'keyup', function( event ) {
var str = $( this ).val();
str = str.replace(/[^A-Za-z-0-9.'\s]/g, "").substring(0,15);
if($( this ).val() != str) {
$( this ).val( str );
}
});
要解决从文本中间删除字符的问题,您需要记住并重置插入位置。为此,您可以使用以下功能:
$.fn.getCaretPosition = function() {
var el = $(this).get(0);
var pos = 0;
if ('selectionStart' in el) {
pos = el.selectionStart - 1;
} else if ('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
}
$.fn.setCaretPosition = function(pos) {
if ($(this).get(0).setSelectionRange) {
$(this).get(0).setSelectionRange(pos, pos);
} else if ($(this).get(0).createTextRange) {
var range = $(this).get(0).createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
扩展你的keyup处理程序:
$('#sample').on('keyup', function(event) {
var str = $(this).val();
str = str.replace(/[^A-Za-z-0-9.'\s]/g, "").substring(0, 15);
if ($(this).val() != str) {
var pos = $(this).getCaretPosition();
$(this).val(str);
$(this).setCaretPosition(pos);
}
});
查看更新的FIDDLE。
答案 1 :(得分:2)
因为您收听了keyup事件,所以当任何键启动时都会执行该函数,包括CTRL + C,箭头。 所以相反,您可以使用.on('input',foo()),只有在文本被更改时才会执行。
$( '#sample' ).on('input',function( event ) {
var str = $( this ).val();
str = str.replace(/[^A-Za-z-0-9.'\s]/g, "").substring(0,15);
$( this ).val( str );
});
答案 2 :(得分:1)
对于像这样的特殊字符,请使用“防止默认值”
$( '#sample' ).on( 'keypress', function( event ) {
var ch = String.fromCharCode(event.keyCode);
ch = ch.replace(/[^A-Za-z-0-9.'\s]/g, "");
if(ch == "") {
event.preventDefault();
}
});