4

入力の「リアルタイム」検証の簡単な実装があります。使用できる文字は、小文字と大文字のアルファベット、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 をセットアップしました

4

3 に答える 3

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を参照してください。

于 2012-10-17T18:02:03.473 に答える
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 );
});​
于 2012-10-17T18:16:05.803 に答える
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();
   }
});​

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

于 2012-10-17T18:03:18.267 に答える