Разтеглено текстово поле
Изглежда проста задача и със сигурност някой вече е правил нещо подобно. За съжаление тези, които открих, се оказаха твърде сложни, включваха сложни математически изчисления и не работеха правилно, ако блок с някакъв текст първоначално беше скрит. Нека научим най-добрия начин, който ще бъде прост и ще реши проблема с първоначално скритото поле за въвеждане на текст.
Използване на клониран скрит елемент
Елементът div, както знаете, ще се разтегне, за да пасне на височината на съдържанието си (приемайки, че няма обвиване или абсолютно позициониране). Така че, за да получите височината на текстовото поле, просто трябва да направите следното:
- Заредете съдържание в текстовото поле
- Създаване на невидим клонинг DIV
- Дайте на клонинга същата ширина и типография като текстовото поле
- Поставете съдържание в клонинг
- Вземете височина на клонинг
- Направете текстовото поле със същата височина като клонинга
Един от ключовете към това решение е CSS. Както споменахме, невидимият клонинг трябва да има същите свойства като текстовото поле. Това не е само размер на шрифта и семейство шрифтове, но и бяло пространство и обвиване на думи.
Ето CSS за текстовото поле:
Ето CSS, който ще приложа към скрития клонинг на текстовото поле:
Забележете, че го скрих от потребителя с display: none.
Също така зададох свойството за бяло пространство на "предварително обвиване". Това гарантира, че линиите ще се обвият правилно, но всичко останало ще бъде предварително форматирано. Също така зададох ширината да бъде равна на ширината на текстовото поле и дублирах няколко типографски свойства. Също така давам на клонинга и текстовата област минимална височина, така че винаги да започва от стандартаизползвана височина.
Сега, нека бързо да скицираме кода на jQuery:
Този код предполага, че имаме едно текстово поле на страница. Ако трябва да обработите множество текстови полета, тогава трябва да коригираме първия ред във функцията.
Динамично променям височината въз основа на jQuery събитие в keyup. Можете лесно да промените това, за да отговорите на Ajax заявка, ако заредите съдържание по този начин.
Използването на keyup обаче е добра идея, защото най-вероятната причина за автоматична промяна на височината на текстово поле е въвеждането от потребителя.
Какво ще кажете за IE8?
Уви и ах, нашият красив скрипт отказа да работи правилно в IE8. Ако все още го използвате, добавете следните редове към нашия код:
Но дори и след като добавихме този ред, все още имаме проблем: дългите, непрекъснати редове текст няма да повлияят на височината на текстовото поле. Това всъщност не е голяма работа: просто добавете CSS свойството word-wrap: break-word към клонинга на текстовото поле.
Превръщането му в jQuery плъгин
Нашият скрипт за автоматично разтягане на текстово поле може лесно да се превърне в плъгин:
След това просто трябва да го наречем $(".autoresize").textareaAutoresize(); И се наслаждавайте. Скриптът работи чудесно, докато въвеждаме текст в текстовото поле. Ако вмъкнем тагове, та дори и със стилове. познайте какво ще стане вярно! Кодът вътре в текстовото поле ще бъде заменен в нашия клонинг и тъй като е блоков елемент, неговата височина ще бъде изчислена, като се вземат предвид стиловете на заменените тагове. Нека направим промяна в нашия скрипт, като добавим заместване на знаци и > на, да речем, * :
Послеслов: Оптимизация на кода
Както може би сте забелязали, нашият код не е съвсем перфектен по отношение напроизводителност. Обвинявай всичко. да, съдържанието на реда var = $(this).val().replace(/[ ]/g, '*').replace(/\n/g, ' '); . Преди да повторите ред символ по знак в търсене на нов ред ( replace(/\n/g, ' ')), би било добра идея да определите версията на браузъра и да стартирате итерацията само ако е IE8 или по-стара. Например, добавете свойството ie8 към обекта за настройки:
След това пишем if(!settings.ie8) content.replace(/\n/g, ' '); и прекъсват ресурсоемките операции в съвременните браузъри.
Въпреки това нашият скрипт вече работи доста бързо, така че не се притеснявах. Но ако срещнете проблеми с производителността, знаете какво можете да направите.