JQuery изменить размер текстового поля, чтобы соответствовать содержимому - PullRequest
Новая
       69

JQuery изменить размер текстового поля, чтобы соответствовать содержимому

2 голосов
/ 23 декабря 2019

У меня есть форма с текстовыми полями, которые могут сильно различаться по размеру. Я пытаюсь изменить их размер в зависимости от их содержимого.

Я работал с различными решениями и сводил это к следующему: 

$("input[type=text]").width($(this).val().length)

Мне кажется,что это должно работать. Может кто-нибудь сказать мне, почему это не так? Благодарю.

Ответы [ 2 ]

2 голосов
/ 23 декабря 2019

Если вы вычисляете ширину на основе длины текста, решение может быть нарушено при вводе некоторых символов, которые имеют другой размер. Например: w против i.

Мое предложение: получить значение из ввода, добавить его к некоторому элементу div, который скрыт в теге <body>. После расчета ширины текста на основе div, вы можете обновить ширину ввода. 

$("input[type=text]").on('input', function (event) {
  var value = $(this).val();
  
  var div = $('<div>').text(value).appendTo('body');
  
  $(this).width(div.width());
});
div {
  position: absolute;
  visibility: hidden;
  font-size: 12px;
  font-family: Arial;
}

input {
  padding: 0 6px;
  font-size: 12px;
  font-family: Arial;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input type="text" />

Примечание: свойства font-size и font-family для div / input должны быть одинаковыми.

1 голос
/ 23 декабря 2019

Работает, но по умолчанию использование .width (параметр) автоматически преобразует параметр в пиксели. Таким образом, использование .length даст вам только 1 символ = 1 пиксель.

Попробуйте демонстрацию ниже, я добавил еще одно поле ввода, в котором используется умножение для дополнительного добавления / указания длины для каждого ввода символов; 

$("input[type=text]").on("keypress", function() {
  $(this).width($(this).val().length);
});

$("input[type=text].add").on("keypress", function() {
  $(this).width($(this).val().length * 8);
});
input {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" placeholder="Default" />

<br/>

<input class="add" type="text" placeholder="With Multiply" />
...