Как посчитать количество строк в textarea?

Question

[Qubert]

Здравствуйте!

Как можно посчитать количество строк в textarea?

Спасибо

Comments

[Юрий Лобанов]

Автор, куда пропали?

Answer 1

[Юрий Лобанов]

Смотря что Вы считаете строками. Если реальные строки, то можно считать количество переводов строки, если видимые строки, то наверное без эмуляции не обойтись. Вот наглядный пример того и другого:
codepen.io/iiil/pen/Ehpbc

Comments

[Евгений Петров]

В эмуляции Chrome покажет ошибку — он, сука такая, возвращает 'normal' для правила line-height. Есть подозрение, что Opera, Yandex и Safari сделают то же самое.

[Юрий Лобанов]

@Petroveg там есть еще одна проблема, если количество строк меньше допустимого в textarea, то считать соответственно будет неправильно.
Надо додумать на досуге. У Вас никаких идей?

[Евгений Петров]

Идея ровно та же — эмулировать до победного)) То есть если нет цифр в lineHeight, то пишем символ в див и берём высоту.

[Евгений Петров]

@iiil когда делал решение проблемы оформления границ текстовых прямоугольников toster.ru/q/121825, вдруг вспомнил про эту задачу.

Зачем мы высоту искали, делили на line-height... Надо было просто в div воткнуть span и брать количество областей от его getClientRects().

[Юрий Лобанов]

@Petroveg ага. Жаль, что автор оказался не способным оценить ни то, ни другое решение. Но я так понимаю, что первое решение имеет лучшую поддержку?

[Евгений Петров]

Да вроде метод-то поддерживается с незапамятных времён. Так что единственный вопрос — производительность. То ли clientRects(), то ли расчёт высоты и деление (возможно, с округлением).

Терзают смутные сомнения, что для clientHeight задействуются механизмы, схожие с теми, что и при clientRects().

[Евгений Петров]

@iiil сделал тесты — getClientRects для подсчёта строк оказался существенно медленней, чем взятие высоты банальное деление с округлением.

Проверял на 1 000 000 итераций:
80 мс : 1800 мс [FF]
10 мс : 2000 мс [Chrome]

Так что для специфических задач getClientRects пойдёт, а для мелких и частых изменений состояния, возможно, лучше более примитивные. Безусловно, одна операция копеечная — даже в Chrome всего 2 мкс.

Кстати, на самом блоке getBoundingClientRect существенно быстрее (тот же 1 000 000 итераций):
200 мс [FF]
100 мс [Chrome]

Так что я ошибался с мыслью, что реализация client-, offset-, scroll- параметров так же затратна, как и определение областей элементов.

Answer 2

[Дмитрий Скогорев]

Comments

[Дмитрий Скогорев]

хм... ссылки не обработались. stackoverflow.com/questions/2035910/how-to-get-the... и stackoverflow.com/questions/1743745/count-new-line...

Answer 3

[Евгений Петров]

Ну вот примерно так jsfiddle.net/petroveg/YnZuh/2
Идея всё та же, что предложил @SiDChik и применил @iiil — эмуляция, эмуляция, и ещё раз эмуляция...

Answer 4

[SiDChik]

Есть способ при котором копируешь весь текст в отдельный span/div с такой же шириной, затем полученную высоту делишь на высоту строки - получаешь количество строк.

Comments

[Дмитрий Скогорев]

Мсье знает толк в извращениях

[SiDChik]

@EnterSandman вопрос был не сколько переводов строк в тексте, а сколько строк конкретно в textField поэтому я и предложил такое решение.

[Дмитрий Скогорев]

@SiDChik количество переводов строк + 1 = количество строк. А вы копированием украли у меня мегабайт памяти и немного процессора

[SiDChik]

@EnterSandman Можно ввести фразу длинной в несколько тысяч символов и в зависимости от ширины textarea в результате может быть разное количество строк. При этом количество переводов строки при таком вводе равно нулю, так как пользователь не нажимал "ввод". Я имел ввиду такую ситуацию.