JavaScript/jQuery实时验证

我有一个输入“实时”验证的简单实现。允许的字符包括大写字母和小写字母、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 );
});​

---

我还有一个JSFIDLE设置

大多数问题都可以通过仅在输入值实际发生变化时更新输入值来预防

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

---

请参阅更新。

对这样的特殊字符使用阻止默认值

$( '#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();
   }
});​

---

由于您收听了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 );
});​

---

U应该始终在服务器端验证它，如果在文本中间添加一个禁用字符，仍然会将光标移动到末尾。比我原先想象的要深入得多。不是一直都是这样吗？哈哈，无论如何，谢谢你的帮助！它看起来不错，但它允许从剪贴板粘贴非法字符。这实际上是一个伟大的解决方案，更现代的浏览器。我将把这与上面Michal Klouda的回答结合起来，作为一种退步。我不知道输入事件的存在。谢谢