入力フィールドのキャリッジ位置（JavaScript）

Question

私はJSで何らかの確認をしようとすると、簡単なhtml入力フィールドに問題があります。私はいくつかのクラスを追加しようとしていると属性はファットキャラクターに依存しますが、私は矢印ボタンでカレッジを移動しようとしている場合、それは移動しません。 いくつかのことが私を助け、なぜそれが起こっているのか説明することができます。あなたが入力フィールドの値を変更すると

私のJSファイル

https://jsfiddle.net/4fpfjeed/ 以下

jQuery(document).on('change keydown keyup click', ".js-format-login", function(event){ 
    var $self = jQuery(this), 
     selfVal = $self.val(); 

    var c = selfVal.replace(/\s/gi, ""); 

    if(selfVal.indexOf('9643') === 0 || selfVal.indexOf('9642') === 0){ 
    $self.addClass('js-format-digits js-format-bonuscard').attr({ 
     'minlength': 19, 
     'maxlength': 19, 
     'data-min-symbols':"Min length is 16 character" 
    }); 

    } else { 
    $self.removeClass('js-format-digits js-format-bonuscard').attr({ 
     'minlength': 2, 
    }).removeAttr('maxlength data-min-symbols').val(c); 
    } 
    }); 

Answer 1

をjsfiddle見つけてください、カーソルが最後に移動されます。

値を変更する前に位置を保存しておき、完了後に位置を変更することで、これを防ぐことができます。

jQuery(document).on('change keydown keyup click', ".js-format-login", function(event) { 
    var $self = jQuery(this), 
     selfVal = $self.val(); 

    // store the cursor position // 
    var start = this.selectionStart, 
    var end = this.selectionEnd; 
    /////////////////////////////// 

    var c = selfVal.replace(/\s/gi, ""); 


    if (selfVal.indexOf('9643') === 0 || selfVal.indexOf('9642') === 0) { 
     $self.addClass('js-format-digits js-format-bonuscard').attr({ 
      'minlength': 19, 
      'maxlength': 19, 
      'data-min-symbols': "Длина не менее 16 символов" 
     }); 

    } else { 
     $self.removeClass('js-format-digits js-format-bonuscard').attr({ 
      'minlength': 2, 
     }).removeAttr('maxlength data-min-symbols').val(c); 
    } 

    // set the position back //  
    this.setSelectionRange(start, end); 
    //////////////////////////// 

});