Правильная ширина ввода текста для закрытия

Question

У меня есть сгенерированный JS текст для заполнения пробела / cloze , и у меня возникают проблемы с настройкой текстовых полей до нужного размера.

Но, в отличие от других, я точно знаю, что пользователь будет / должен вводить.

Итак, если у меня есть пробел _______________, как этот, я хочу, чтобы ввод был ровно 4 символа в ширину. Однако, возможно, поскольку я использую пропорциональный шрифт (и это не изменится), ширина всегда слишком велика (даже для последовательности прописных букв D, которые довольно широки).

Итак, что вы предлагаете? Я попытался установить ширину с размером, шириной CSS в em (слишком большой) и ex (слишком узкий даже для xxes).

I может вычислить ширину фактического слова (того, которое нужно заполнить) скрытого элемента span, но это выглядит не элегантно.

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

Answer 1

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

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

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

Онлайн Пример: http://jsbin.com/epagi/edit Отрисовано аккуратно в Firefox, ChromeSafari и IE.

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

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

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

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

Я расширил объект String, добавив метод repeat, который позволяет мне легко создавать строку ожидаемого размера.и добавьте его к специальному элементу 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();
  });
});​

Answer 2

Mootools

На случай, если кто-нибудь наткнется на это, в Mootools я просто создал диапазон, содержащий текст для заполнения, и должен использовать эти методы из Mootools More (они гарантируют невидимость, что очень важно для закрытие.

$('gapsize').measure(function(){return this.getComputedSize()});