Блог

Главная - Вопросы по программированию - Увеличивающееся текстовое поле на основе ширины вводимых символов

Увеличивающееся текстовое поле на основе ширины вводимых символов

#javascript #html

#javascript #HTML

Вопрос:

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

JavaScript:

 function MakeWidth(el) {
        el.style.width = parseFloat(el.value.clientWidth) }

HTML:

 <input id="Test" type="text" style="width: 10px;" onkeyup="MakeWidth(this)"/>

Ответ №1:

Попробуйте size amp; length вместо clientWidth amp; width

http://jsfiddle.net/eVd9b/5/

 function MakeWidth(el) {
    el.size = parseInt(el.value.length);
}

которое должно подходить для ваших нужд.

Комментарии:

1. Почему первые несколько символов обрезаются? Пробовал в Firefox.

2. Я не уверен, что это довольно хорошо работает в Chrome 15 и Opera. Попробуйте моноширинный шрифт

3. После некоторого тестирования этот метод не распознает, что ‘W’ и ‘i’ имеют разную ширину в немоноширинных шрифтах. Я ищу решение, которое делает.

4. @Mike: Это действительно проблематично. шрифт monospce — ваша гарантия.

Ответ №2:

Возможно, более полезным будет использовать size атрибут.

 <input id="Test" type="text" size="1" onkeyup="MakeWidth(this)"/>
<script>
function MakeWidth(el) {
        el.size = el.value.length

}
</script>

Ответ №3:

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