Блог

Я хочу input , чтобы значение to resize основывалось на ширине autocomplete выделения, а также на -internal-input-suggested . В настоящее время ширина ввода изменяется в соответствии с размером заполнителя и значением ввода, однако автозаполнение и -internal-input-предлагаемые в настоящее время не изменяют ширину ввода в соответствии с результатом.

 $(document).ready(function () {
  var $inputs = $(".inputs");

  // Resize based on text if text.length > 0
  // Otherwise resize based on the placeholder
  function resizeForText(text) {
    var $this = $(this);
    if (!text.trim()) {
      text = $this.attr("placeholder").trim();
    }
    var $span = $this.parent().find("span");
    $span.text(text);
    var $inputSize = $span.outerWidth();
    $this.css("width", $inputSize);
  }

  $inputs.find("input").keypress(function (e) {
    if (e.which amp;amp; e.charCode) {
      var c = String.fromCharCode(e.keyCode | e.charCode);
      var $this = $(this);
      resizeForText.call($this, $this.val()   c);
    }
  });

  // Backspace event only fires for keyup
  $inputs.find("input").keyup(function (e) {
    if (e.keyCode === 8 || e.keyCode === 46) {
      resizeForText.call($(this), $(this).val());
    }
  });

  $inputs.find("input").each(function () {
    var $this = $(this);
    resizeForText.call($this, $this.val());
  });
}); 

 .inputs input,
.inputs span {
  font-size: 16px;
  font-family: inherit;
  white-space: pre;
  padding: 5px;
}
.inputs span  {
    display: none
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputs">
  <input autocomplete="email" placeholder="placeholder" />
  <span style="display:none"></span>
</div> 

Вместо использования keypress and keyup , почему бы просто не использовать input событие? Кроме того, я не вижу необходимости в скрытом span элементе, который используется только для вычисления ширины. Изящный трюк в CSS заключается в использовании ch единицы измерения, а не px в том случае, если вам нужно установить ширину, равную длине текста.

1ch примерно равна ширине 1 символа.

jquery Событие input запускается для автозаполнения и каждый раз, когда в поле ввода вводится значение.

Я также привязываю blur событие на случай, если автозаполнение заполняет другие поля.

Изначально установите ширину input для 11ch , потому что длина «заполнителя» составляет 11 символов.

 .inputs input {
  font-size: 16px;
  font-family: inherit;
}
input[type="text"] {
  width: 11ch;
  max-width: 50ch;
}
 

Вот как должен выглядеть JS:

 $(document).ready(function() {
  var $inputs = $(".inputs");
  
  //this binds all input fields. No need for loop.
  $("input").on('blur input', function() {
    var inputLength = $(this).val().length;
    if (inputLength > 0) {
      $(this).css("width", inputLength   'ch');
    } else {
      $(this).css("width", '11ch');
    }
  });

});
 

Вот скрипка, если она вам нужна