Здавалося б - проста задача. Але якщо пошукати плагіни або скрипти, які присвячені даній темі, то виявиться неприємний сюрприз - вони все виявляються надмірно складними для вирішення такого простого питання. Більшість з них використовує складні математичні обчислення, хоча є більш простий спосіб.
Використовуємо прихований клонуючий елемент.
Ключовим моментом даного рішення є код CSS. Як уже згадувалося, невидимий клон повинен мати такі ж типографические властивості, як і елемент textarea. У список включається не тільки font-size і font-family. але і властивості white-space і word-wrap. так як клон повинен імітувати все, що відбувається всередині елемента textarea.
Для елемента textarea код CSS буде наступним:
Наступний код CSS використовується для прихованого клонуючого елемента:
Ми використовуємо властивість display: none. щоб зробити елемент невидимим для користувача. Швидше за все, таке рішення підходить і для програм читалок з екрану.
Також використовується властивість white-space із значенням "pre-wrap", для коректного перенесення рядків. Ширина елемента клону дорівнює ширині елемента textarea. Крім того однаковими задаються кілька інших властивостей, в тому числі і min-height.
Даний код передбачає, що у нас використовується тільки один елемент textarea на сторінці. За наявності кількох елементів textarea на сторінці, то потрібно змінити селектор в першому рядку для вибору потрібних.
Використання події keyup також є хорошим прикладом, тому що даний елемент часто використовується при введення даних користувачем.
А що відбувається в IE6-8?
Однак довгі рядки без переносів продовжують вносити помилки в процес. Тому треба використовувати властивість word-wrap: break-word для клонуючого елемента.
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!