Атрибут размера HTML <input> не работает?

Ответ 1

Вероятно, это зависит от используемого вами шрифта и от того, с чем вы тестируете!

Ответ 2

Моноширинный шрифт

Лучшие результаты, которые я видел, пришли через моноширинный шрифт:

<input type="text" size="4" style="font-family:monospace" />

Пример в Интернете: http://jsbin.com/epagi/edit Четко отображается в Firefox, Chrome, Safari и IE.

Если вы используете шрифт переменной ширины, вам придется использовать скрипты, чтобы лучше понять, что такое ожидаемая ширина, но, как вы сказали, это не очень элегантно.

Шрифт переменной ширины

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

В основном то, что я сделал, было установлено text-transform конкретных входов на uppercase, чтобы получить полусогласованное ожидание того, насколько широко будет что-то, когда будет заполнено текстом. Затем я применил имя класса, в котором указывалось, что поле должно быть автоматическим, и сколько символов мы ожидаем: sizeMe-4. Используя jQuery, я собрал все эти входы и разделил это имя класса, чтобы получить количество ожидаемых символов.

Я расширил объект String, чтобы включить метод повтора, который позволяет мне легко создать строку ожидаемого размера и добавить ее в специальный элемент span для получения ширины. Затем эта ширина была ретроактивно применена к исходному входному элементу. Пробел затем отбрасывается.

Онлайн-демонстрация: http://jsbin.com/epagi/2/edit

Для удобства здесь код:

<input type="text" name="pin" maxlength="4" class="sizeMe-4" 
       style="text-transform:uppercase" />

-

String.prototype.repeat = function(num) {
    return new Array( num + 1 ).join( this );
}

$(function(){
  $(":input[class^='sizeMe']").each(function(){
    var size = Number($(this).attr("class").split("-").pop());
    var newW = $("<span>").text( "X".repeat(size) ).appendTo("body");
    $(this).width( $(newW).width() );
    $(newW).remove();
  });
});​

Ответ 3

Множество устаревших плохих сведений Удача в получении

 size="100" to work in Chrome, not going to work

для встроенного стиля

style="width:20px"