Jak vymazat obsah inputu po kliknutí do něj? Pomocí onfocusu v JS!
Určitě se Vám někdy hodí vymazat obsah inputu po kliknutí do něj. Například pro zadání uživatelského jména, hesla, nebo pro vyhlededávání. Řešení je pomocí JS vlastnosti onfocus.
Kapitoly (s kotvami): Vymazání obsahu inputu po kliknutí do něj | Vymazání určitého řetězce textu z inputu po kliknutí do něj | Vymazání určitého (nebo celého) řetězce textu z inputu a nahrazení jiným po kliknutí do něj | Funguje onfocus i u textarey?
Vymazání obsahu inputu po kliknutí do něj (#vymazani)
Text ve value se musí shodovat s tím druhým textem v JS. Červeně zvýrazněné oblasti musí být stejné. HTML s inputem:
<input value=“Text pro vymazání“ onfocus=’if(this.value==“Text pro vymazání„) this.value=““‚>
Do prvního value=““ píšeme text, který se zobrazí v inputu. Ve druhém value==““ se dvěma rovnítkami vkládáme text, který chceme vymazat po kliknutí. Může tam být klidně jen část řetězce z prvního value. Do třetího value=““ vkládáme text,který chceme zobrazit po kliknutí do inputu. My nechceme zobrazit žádný text, proto je tento value prázdný. Živá ukázka.
Vymazání určitého řetězce textu z inputu po kliknutí do něj (#retezec)
Postup je úplně stejný jako u předchozí možnosti, ale jako hodnotí třetího value=““ vložíme jiný text (bez toho předchozího řetězce). Příklad HTML:
<input value=“Text pro vymazání“ onfocus=’if(this.value==“Text pro vymazání„) this.value=“vymazání„‚>
A po kliknutí do inputu s textem Text pro vymazání se zobrazí jen text vymazání. Živá ukázka.
Vymazání určitého (nebo celého) řetězce textu z inputu a nahrazení jiným po kliknutí do něj (#nahrazeni)
Také úplně stejný postup jako předchozí dvě možnosti. Jen jako obsah třetího value=““ zadáte úplně jiný text. Příklad HTML:
<input value=“Text pro vymazání“ onfocus=’if(this.value==“Text pro vymazání„) this.value=“Úplně jiný text po kliknutí„‚>
A po kliknutí do inputu s textem Text pro vymazání se logicky text v inputu nahradí textem z posledního value=““, tedy Úplně jiný text po kliknutí. Živá ukázka.
Funguje onfocus i u textarey? (#textarea)
Ano, ale zápis je trochu jiný. Není tam první value, obsah textarey (nebo je na konci měkké i?) se totiž vkládá až mezi tagy <textarea> a </textarea>. Pokud bychom tedy chtěli nahradit text Text pro vymazání textem Úplně jiný text po kliknutí, do druhého (vlastně nyní prvního) value=““ vložíme text shodný s textem mezi tagy <textarea> a </textarea> a do třetího (vlastně druhého) value=““ vložíme nový text. Živá ukázka. Celkový HTML kód pro textareu by vypadal nějak tato:
<textarea onfocus=’if(this.value==“Text pro vymazání„) this.value=“Úplně jiný text po kliknutí„‚>Text pro vymazání</textarea>
Je to snadné že?
Jen nezapomeňte!
Text ve prvním value=““ se vždy musí shodovat s tím druhým value=““ textem. Říkáme tím JavaScriptu s jakým textem má pracovat. Ve třetím value=““ může být libovolný text, který se zobrazí po kliknutí do inputu.
Pokud máte k článku dotazy, objevili jste chybu, nebo chcete pochválit tento článek, neváhejte využít komentáře níže. Budu rád!