输入字段中的回车位置(JavaScript)

Carriage position in input field (JavaScript)

本文关键字：JavaScript 位置 回车 字段 输入      更新时间：2023-09-26

我有一些简单的html输入字段的问题，当我试图用JS做一些检查。我尝试添加一些职业和属性取决于第一个角色，但如果我试图通过箭头按钮移动目标，它不会移动。也许有人能帮我解释一下为什么会这样。

请在下面找到jsfiddlehttps://jsfiddle.net/4fpfjeed/

我的JS文件

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

当您更改输入字段的值时，光标将移动到末尾。

您可以通过在更改值之前存储位置，然后在完成后将其更改回来来防止这种情况。

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);
    ////////////////////////////
});
相关文章：