ширина поля ввода установлена ​​на содержание

Question

Итак, у меня есть jsfiddle .У меня есть два плагина jquery ui, которые выдают эти два поля ввода.Таким образом, пользователь не имеет права редактировать поля вручную, поэтому они установлены только для чтения.

Теперь проблема в том, есть ли способ изменить ширину полей ввода в зависимости от размера контента?Установка только ширины в css, скажем, 300px или около того, возможно, будет работать для Septemember, но если пользователь выбирает какой-то другой месяц, например, май, то он должен быть намного меньше 300px.

Answer 1

Проверьте это: http://jsfiddle.net/SSBYG/30/

Что я сделал, так это подсчитал все символы и затем установил ширину на основе результатов

date.style.width = (date.value.length * 7) + "px";
time.style.width = (time.value.length * 7) + "px";

Примечание: если вы собираетесь использовать это много, а не только 2 раза, будет хорошей идеей сделать функцию

Это также полезно: jQuery подсчитать символы и добавить класс

Answer 2

Атрибут size html-тега input типа text предназначен для указания видимой ширины в символах. Таким образом

function adjust_width(element) {
    element.size=element.value.length;
}
adjust_width($('#date')[0]);
adjust_width($('#time')[0]);

должен добиться цели с вашим примером.