Zobrazování watermarku v ASP.NET

Tomáš Holan       25. 4. 2013       ASP.NET/IIS       5310 zobrazení

Po dlouhé době jeden tip ohledně ASP.NET. Konkrétně se koukneme na to, jak v ASP.NET vytvořit pole TextBox se zobrazeným watermarkem (text, který je zobrazen, pokud je pole TextBox prázdné).

Je to poměrně jednoduché, stačí použít AJAX Control Toolkit, který obsahuje prvek s názvem TextBoxWatermarkExtender. Jak název napovídá, jedná se o extendér tj. prvek, který se použije spolu se standardním prvkem TextBox a on provede rozšíření standardního prvku o požadovanou funkcionalitu – v našem případě tedy o zobrazení watermarku.

Základní použití prvku TextBoxWatermarkExtender vypadá například takto:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<asp:TextBox ID="txtDatumNarozeni" runat="server" SkinID="RegistraceField" MaxLength="10" ToolTip="Datum narození" />
<ajaxToolkit:TextBoxWatermarkExtender ID="DatumNarozeniWatermark" runat="server" TargetControlID="txtDatumNarozeni" WatermarkCssClass="RegistraceField water" WatermarkText="Datum narození*" />

Vlastnost WatermarkText definuje jaký text bude jako watermark zobrazen a vlastnost WatermarkCssClass odkazuje na CSS styl, který se pro jeho zobrazení použije. Ten bude typicky měnit jeho barvu:

input[type="text"].water, textarea.water {
    color: #b6b6b6;
}

Výsledek pak může vypadat takto:

Watermark

Dále se můžeme setkat s tím, že budeme potřebovat na klientu v JavaScriptu do pole obsahující watermark nastavovat hodnotu. To ale díky watermarku nelze provádět standardním nastavením vlastnosti value prvku input na stránce.

Místo toho je potřeba postupovat takto:

  • U prvku TextBoxWatermarkExtender nastavíme navíc vlastnost BehaviorID, jehož hodnotou bude zvolený identifikátor.
<asp:TextBox ID="txtDatumNarozeni" runat="server" SkinID="RegistraceField" MaxLength="10" ToolTip="Datum narození" />
<ajaxToolkit:TextBoxWatermarkExtender ID="DatumNarozeniWatermark" runat="server" TargetControlID="txtDatumNarozeni" BehaviorID="DatumNarozeniWatermarkBehavior" WatermarkCssClass="RegistraceField water" WatermarkText="Datum narození*" />
  • V JavaScriptu se pomoci tohoto identifikátoru (a jQuery) odkážeme na interní “behavior objekt”, který si udržuje aktuální hodnotu pole formuláře. Pro nastavení nebo změnu této hodnoty pak použijeme metodu set_Text.
var wbDatumNarozeni = $find("DatumNarozeniWatermarkBehavior")
if (wbDatumNarozeni) {
    var datumNarozeni = new Date();
    wbDatumNarozeni.set_Text(datumNarozeni.format("d.M.yyyy"));
}

Obdobným způsobem musíme pro načítání vnitřní hodnoty prvku TextBox používající TextBoxWatermarkExtender volat metodu get_Text behavior objektu.

var datumNarozeni = $find("DatumNarozeniWatermarkBehavior").get_Text();

 

hodnocení článku

0       Hodnotit mohou jen registrované uživatelé.

 

Nový příspěvek

 

RE: Zobrazování watermarku v ASP.NET

jj placeholder funguje, ale je k tomu dobré ještě přidat Placeholder jQuery Plugin http://mathiasbynens.be/demo/placeholder minimálně pro IE9.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

RE: Zobrazování watermarku v ASP.NET

Dík za tip, na nové projekty by to asi šlo.

nahlásit spamnahlásit spam 0 odpovědětodpovědět

RE: Zobrazování watermarku v ASP.NET

Případně můžeš použít html5 atribut placeholder, který dělá to samé bez potřeb nějakých knihoven. V moderních browserech už funguje.

nahlásit spamnahlásit spam 0 odpovědětodpovědět
                       
Nadpis:
Antispam: Komu se občas házejí perly?
Příspěvek bude publikován pod identitou   anonym.

Nyní zakládáte pod článkem nové diskusní vlákno.
Pokud chcete reagovat na jiný příspěvek, klikněte na tlačítko "Odpovědět" u některého diskusního příspěvku.

Nyní odpovídáte na příspěvek pod článkem. Nebo chcete raději založit nové vlákno?

 

  • Administrátoři si vyhrazují právo komentáře upravovat či mazat bez udání důvodu.
    Mazány budou zejména komentáře obsahující vulgarity nebo porušující pravidla publikování.
  • Pokud nejste zaregistrováni, Vaše IP adresa bude zveřejněna. Pokud s tímto nesouhlasíte, příspěvek neodesílejte.

přihlásit pomocí externího účtu

přihlásit pomocí jména a hesla

Uživatel:  
Heslo:  

zapomenuté heslo

 

založit nový uživatelský účet

zaregistrujte se

 
zavřít

Nahlásit spam

Opravdu chcete tento příspěvek nahlásit pro porušování pravidel fóra?

Nahlásit Zrušit

Chyba

zavřít

feedback