Обновление: спасибо @Pebbl за исправление ошибок, это код, необходимый для получения высоты текстового содержимого ( демо )
Автор: Mottie Размещён: 19.11.2009 06:05
0 плюса
9 Репутация автора
это простой и проверенный
Автор: anoop Размещён: 15.02.2011 11:21
2 плюса
745 Репутация автора
Всего одна строчка JS:
2 плюса
21 Репутация автора
Предполагая, что вы знаете высоту строки, самый простой способ сделать это будет:
Хитрость здесь в том, чтобы auto сначала установить высоту . Затем при доступе к scrollHeight браузер выполнит макет и вернет правильную высоту, включая любые переносы строк. Затем восстановите высоту текстовой области до ее первоначального значения и верните результат.
Автор: goblin Размещён: 25.08.2018 01:42
0 плюса
384 Репутация автора
Вы можете получить фактическую высоту текста Element.scrollHeight , но для получения правильной высоты должна быть прокрутка, а это значит, что вы можете временно установить высоту текстового поля до 0 тех пор, пока не получите значение высоты прокрутки и затем не восстановите высоту CSS.
Как только вы это сделаете, вы вычисляете количество строк на основе значения свойства CSS line-height (1 строка текста соответствует getComputedStyle(ref).lineHeight пикселям), что-то вроде .
Примечание: ваши элементы должны присутствовать в DOM, чтобы получить scrollHeight, lineHeight heights и т. Д. Если их еще нет, добавьте их, вычислите значения, а затем удалите их из DOM.
Обновление: благодаря @Pebbl для разработки ошибок, это код, необходимый для получения высоты текстового содержимого (demo)
Только одна строка js:
Вы можете получить доступ к полю через Javascript DOM и просто подсчитать количество символов новой строки.
это простой и проверенный
Посмотрите другие вопросы по меткам javascript html textarea или Задайте вопрос
30 empi [2009-02-17 16:23:00]
Я ищу javascript, который может ограничить количество строк (по строке я имею в виду текст, законченный пользователем, нажимая клавишу ввода на клавиатуре), пользователь может войти в текстовое поле. Я нашел некоторые решения, но они просто не работают или ведут себя действительно странно. Лучшим решением будет плагин jquery, который может выполнять работу — что-то вроде CharLimit, но он должен иметь возможность ограничить количество строк текста, а не количество символов.
javascript jquery textarea
8 ответов
22 Решение marktucks [2009-02-17 18:03:00]
Это может помочь (возможно, лучше всего использовать jQuery, onDomReady и ненавязчиво добавить событие keydown в текстовое поле), но тестировать в IE7 и FF3:
* Редактировать — объяснение: он нажимает клавишу, если нажата клавиша ENTER, и просто не добавляет новую строку, если строки в текстовом поле совпадают с строками текстового поля. Иначе он увеличивает количество строк.
14 Maciej [2011-06-27 09:13:00]
Как это сделать с помощью jQuery:
Привязать к событию textDown keyDown.
Это решение работает:
и текстовая область будет
в регулярном HTML:
Количество видимых/отображаемых строк для данного блока текста будет различаться в зависимости от разных браузеров, используемых шрифтов и т.д. Вы должны установить, по крайней мере, определенный шрифт и размер шрифта, чтобы иметь возможность полу — достоверно рассчитать отображаемые строки.
UPDATE: Я вижу редактирование. Тогда что-то вроде кода кевхаддерсов должно делать хорошо для вас. Вам понадобятся js, который подсчитывает символы и » r
» и проверяет ограничение пользователя. Кроме того, если вы не используете его script, убедитесь, что вы используете его, который включает проверку времени и/или события onKeyDown/onKeyUp в текстовом поле. Возможно, поэтому некоторые скрипты, которые вы тестировали, «ведут себя странно».
(Готово с jquery). Это не идеально, но заботится об упаковке. Не deppending только конца строки (
). У jquery scroll event есть проблемы в mozilla и firefox, если свойство css overflow в textarea не является auto, в противном случае удалите соответствующие строки и скройте переполнение. Может помочь изменить размер css: нет и фиксированная высота.
Источник: