Bagaimana cara memberi petunjuk di kotak teks asp:

102

Bagaimana cara meletakkan petunjuk / placeholder di dalam asp: TextBox? Ketika saya mengatakan petunjuk yang saya maksud adalah beberapa teks yang menghilang saat pengguna mengkliknya. Apakah ada cara untuk mencapai hal yang sama menggunakan html / css?

pengguna590849
sumber
2
Peramban mana yang Anda dukung? Browser HTML5 mendukung placeholderatribut untuk kotak teks.
rikitikitik

Jawaban:

200

The placeholderatribut

Anda sedang mencari placeholderatributnya. Gunakan seperti atribut lain di dalam kontrol ASP.net Anda:

<asp:textbox id="txtWithHint" placeholder="hint" runat="server"/>

Jangan repot-repot tentang IDE Anda (yaitu Visual Studio) mungkin tidak mengetahui atributnya. Atribut yang tidak terdaftar dengan ASP.net akan diteruskan dan ditampilkan apa adanya. Jadi kode di atas (pada dasarnya) dirender menjadi:

<input type="text" placeholder="hint"/>

Menggunakan placeholdersumber daya

Cara yang bagus untuk menerapkan petunjuk ke kontrol menggunakan sumber daya . Dengan cara ini Anda mungkin memiliki petunjuk lokal. Misalkan Anda memiliki file index.aspx , file App_LocalResources / index.aspx.resx Anda berisi

<data name="WithHint.placeholder">
    <value>hint</value>
</data>

dan kontrol Anda terlihat seperti

<asp:textbox id="txtWithHint" meta:resourcekey="WithHint" runat="server"/>

hasil yang diberikan akan terlihat sama dengan yang ada di bab di atas.

Tambahkan atribut dalam kode di belakang

Seperti atribut lainnya, Anda dapat menambahkan placeholderke AttributeCollection:

txtWithHint.Attributes.Add("placeholder", "hint");
Linus Caldwell
sumber
2
Untuk beberapa alasan trik sumber daya "WithHint.placeholder"tidak berhasil untuk saya.
Mmm
1
Saat menggunakan sumber daya, Anda dapat melakukan ini untuk file sumber daya lokal: <asp:TextBox ID="txtWithHint" runat="server" placeholder="<%$ Resources: 52 %>" />atau untuk sumber daya global:<asp:TextBox ID="txtWithHint" runat="server" placeholder="<%$ Resources: ResourceFile, ResourceValue %>" />
EvilDr
saat menambahkan kontrol dalam kode, yang tampaknya Anda butuhkan hanyalah: myTextBox.Attributes.Add ("placeholder", "hint");
Eliot Gillum
61

Tulis saja seperti ini:

<asp:TextBox ID="TextBox1" runat="server" placeholder="hi test"></asp:TextBox>
pathak tejpal
sumber
19
 <asp:TextBox runat="server" ID="txtPassword" placeholder="Password">

Ini akan berhasil, Anda mungkin kadang merasa tidak berfungsi karena Intellisence tidak menampilkan placeholder

Shrivallabh
sumber
7

Menambahkan atribut placeholder dari kode di belakang:

txtFilterTerm.Attributes.Add("placeholder", "Filter" + Filter.Name);

Atau

txtFilterTerm.Attributes["placeholder"] = "Filter" + Filter.Name;

Menambahkan atribut placeholder dari Halaman aspx

<asp:TextBox type="text" runat="server" id="txtFilterTerm" placeholder="Filter" />

Atau

<input type="text" id="txtFilterTerm" placeholder="Filter"/>
Shibu Thomas
sumber
0
asp:TextBox ID="txtName" placeholder="any text here"
Ahmed Soliman
sumber