Po kliknutí do inputu vymazat (nahradit) obsah – onfocus v JavaScriptu

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ějVymazání určitého (nebo celého)  řetězce textu z inputu a nahrazení jiným po kliknutí do nějFunguje 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!

Napište komentář!