У меня есть следующий элемент, который определяет размер = "15". Однако обработанный элемент с атрибутом размера имеет ширину, которая соответствует 25 символам и может соответствовать 30 или около того, если maxlength больше? Maxlength ограничивает количество символов.
<input id="txtSearch" name="txtSearch" type="text" maxlength="25" size="15" />
Вероятно, это зависит от используемого вами шрифта и от того, с чем вы тестируете!
Лучшие результаты, которые я видел, пришли через моноширинный шрифт:
<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();
});
});
Множество устаревших плохих сведений Удача в получении
size="100" to work in Chrome, not going to work
для встроенного стиля
style="width:20px"