GWT: Как получить ширину текста в TextBox?

Question

Мне нужно определить ширину текста в TextBox в Google Web Toolkit. У меня есть пропорциональный шрифт, поэтому я не могу просто использовать что-то вроде getText().length() * characterWidth.

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

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

Answer 1

Я решил проблему, как Corvus , добавив дополнительный элемент Label и скрыв его с помощью CSS. Я копирую текст из TextBox в Label и получаю ширину по Label.getOffsetWidth().

Однако мне нужен был дополнительный код для

1. правильно обрабатывает повторяющиеся пробелы,
2. обрабатывает изменения стиля в текстовом поле, а
3. избегать скачков текста, когда пользователь печатал.

Я обнаружил, что могу сопоставить стили, позвонив

label.setStyleName(textBox.getStyleName() + " prewrap");

Стиль предварительной обертки, указанный в приведенном выше выражении, должен быть определен где-то как

.prewrap { white-space: pre-wrap; }

Этот дополнительный стиль необходим, потому что встроенный стиль для текстового поля содержит директиву pre-wrap, которая не отображается в списке стилей, возвращаемом textbox.getStyleName().

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

Answer 2

Я решил проблему, добавив дополнительный элемент Label и скрыв его с помощью CSS. Я копирую текст из TextBox в Label и получаю ширину на Label.getOffsetWidth().

Я не очень горжусь этим решением, но эй, оно работает.

Answer 3

Я бы пошел с количеством символов, умноженным на ширину буквы «м», что является классическим способом определения верхней границы. Я не могу критиковать то, что вы собираетесь делать, но я считаю, что формы, которые перемещают элементы, могут быть эффективными с точки зрения пространства, но ужасны в использовании. Пользователь видит текстовое поле здесь, затем данные загружаются, и текстовое поле внезапно перемещается. Пользователь потратил время на пересмотр формы, чтобы снова сориентироваться, заново установив ориентиры, которые все равно будут смещаться после загрузки нового фрагмента текста. Вы обменяли пространство на время и становитесь беднее в сделке. Может быть, это не относится к тому, что вы делаете, но если это так, подумайте об этом.

Есть причина, по которой нет очевидного способа сделать то, что вы хотите.

Обновление:

Из corvus: "Таким образом, пользователь может видеть весь текст ... Конечно, должен быть нижний предел, но я начну с довольно большого размера шрифта;) -"

Ах, хорошо. Некоторые мысли по этому поводу. Предположительно, ваше поле данных в любом случае имеет верхний предел с точки зрения размера. Скажи 80 символов. Фиксированное поле такого размера лучше, чем поле, которое щелкает взад-вперед, по причине, которую я привел выше. Но также знайте, что «правильная» длина строки текста составляет около 60 символов или около того. Это связано с сотнями лет опыта верстки в Гутенберге. Даже это просто среднее значение, и вы можете перейти по этой ссылке для подробной эвристики для оценки идеальной длины линии . Если текст, с которым пользователь будет взаимодействовать (либо чтение, либо ввод), длиннее 60 символов (или любой идеальной длины строки, которую вы определяете), то, возможно, вам понадобится многострочная TextArea.

Answer 4

Вы можете использовать TextArea вместо TextBox и использовать ширину прокрутки (textArea.getElement().getScrollWidth()), чтобы определить ширину текста, если она шире текстовой области.

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

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

Чтобы TextArea выглядело как однострочный TextBox, вам нужно установить следующие атрибуты css:

overflow: hidden; // get rid of scrollbars

resize: none; // get rid of resize triangle

А также установите атрибут (без css):

wrap="off" // css "white-space: nowrap;" not working here

Последнее, но не менее важное: отрегулируйте высотудо высоты в один ряд (высота по умолчанию составляет 2 или 3 строки).

Answer 5

Хотя я не уверен, почему вы это делаете, но я могу сказать, что для этого не существует реального надежного решения. Вы можете использовать эвристику так же, как предложила @Steve J, но вы не сможете рассчитать точный размер текста.

Я дам вам только одно замечание, почему ваше решение не будет работать. Что если стиль шрифта, размер и т. Д. Объявлены в собственной таблице стилей пользователя как !important?