Automatická výška <textarea>
Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.
Při použití pole pro psaní delšího textu (<textarea>) čelíme dilematu, jak ho udělat vysoké. Nízká výška způsobí uživateli, co bude chtít zapsat delší text, značné nepohodlí. Naopak vysoká <textarea> bude zase zabírat možná zbytečně hodně místa.
Prohlížeče kromě IE 11 a starších umožňují provést změnu velikosti tažením myši, slouží k tomu CSS vlastnost resize.
Co ale velikost uzpůsobovat automaticky v závislosti na obsahu?
Počítání znaků
Asi první, co člověka napadne, je počítat v <textarea> znaky a odřádkování a nějak podle toho vypočítat výšku.
Přepočet výšky je nutný provádět při události oninput (pro starší prohlížeče onkeyup + onpaste + oncut + onfocus).
Vzhledem k různým proporcím různých písmen je téměř nemožné dosáhnout přesného výsledku.
Zjištění výšky scrollHeight
Asi nejlepší možnost je při změně obsahu nastavit výšku na 0 a z vlastnosti scrollHeight získat rozměry, které se následně nastaví jako výška.
V případě okrajového box modelu je ještě nutno připočíst offsetHeight.
Skript si při inicialisaci nastaví pro <textarea> do data-* atributu aktuální výšku, která se bude brát jako minimální. Výchozí minimální výšku tak jde zadat přes height nebo atributem rows.
Využití contenteditable
Poslední možnost je použít contenteditable atrapu. Skutečná <textarea> se schová pomocí display: none a místo ní se vloží obyčejný <div>, který umožňuje zapisovat text. Při odeslání formuláře se potom obsah <div>u překopíruje do skutečného pole, které se tak řádně odešle na server.
Jde si tak vytvořit i primitivní WYSIWYG editor.
Jelikož se jedná o obyčejný <div>, automatické roztahování bude jeho běžná vlastnost.
Nevýhoda tohoto postupu tkví ve větší pracnosti s převedením obsahu do požadované formy. Z políčka vyleze míst plain textu HTML, které se navíc bude lišit napříč prohlížeči.
Například odřádkování někde vytváří nové odstavce (<p>), jinde <div> a někde pro změnu <br>.
Odkazy jinam
- jQuery Autosize – plugin do jQuery zajišťující automatickou výšku (může být i plynule animovaná).
- Stretchy – automatická velikost elementů
<textarea>i<input>
Související články
Jak vkládat 3D objekty na web pomocí Three.js
Které formáty použít, jak vytvářet modely pomocí AI a kdy raději použít obrázek nebo video.
Jak neotravovat uživatele validací formulářů
Kdy zobrazovat chyby, kdy ne, a jak pomoci uživatelům místo jejich trestání.
Automatické načítání firemních údajů z registru ARES
Návod na získání dat o firmě z IČO nebo DIČ pomocí veřejné API a jejich použití pro předvyplnění webových formulářů.
