JavaScript / jQuery實時驗證

Question

我對輸入進行了一些“實時”驗證的簡單實現。 允許的字符為大小寫字母，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

Answer 1

僅當輸入值實際發生更改時，才可以預防大多數問題。

$( '#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 。

Answer 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 );
});​

Answer 3

對這樣的特殊字符使用prevent Default

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

http://jsfiddle.net/sjTUw/34/