ASP.NET กับ jQuery: ใส่ default text ไว้ใน TextBox

ความต้องการ…

ไม่ต้องการสร้าง Lable เพื่ออธิบาย field ที่ต้องกรอกให้ลกตา แต่ต้องการใส่ ข้อมูลบอกผู้ใช้ ลงไปใน field text box นี้เลย ดูภาพข้างล่างนี้

พอเราเอา mouse เข้าไป focus ที่ text box ก็ให้ ข้อมูลบอกผู้ใช้นี้หายไปด้วย ดูภาพข้างล่างนี้

เริ่มทำกันเลย…

1. จาก WEB projects เพิ่ม Web from ชื่อว่า InfoInTextBox.aspx

2. เพิ่ม TextBoxs พร้อมปุ่ม ก็เจอ หรือค้นหาลงไปบน form จะได้ code ตามข้างล่างนี้

<form id=”form1″ runat=”server”>
<p></p>
<div align=”center”>
<fieldset style=”width:400px;height:80px;”>
<p><asp:TextBox ID=”TextBox1″ width=”200px” CssClass=”defaultText” ToolTip=”ใส่คำหลักของคุณเพื่อค้นหาที่นี่” runat=”server”></asp:TextBox>
<asp:Button ID=”btnSubmit” Text=”ก็เจอ” runat=”server” /></p>
</fieldset>
</div>
</form>

3. เติม CSS ให้ข้อมูล text default เป็นสีเทา และเป็นตัวเอียง เพื่อให้ดูแตกต่างจากข้อมูลของผู้ใช้ที่กรอก

.defaultText
{
font-style:italic;
color:#CCCCCC;
}

4. ลอง run ดูก็จะเห็นตามภาพแรก

ต่อไปเราก็มาเติม code ที่ทำให้ form ของเราเป็นอย่างที่เราต้องการ ตามนี้ครับ

วิธีการทำ …

1. ใน code javascript ส่วนของ function document.ready() ให้ค้นหา TextBox โดยใช้ ClientID ในการค้นหา แล้วเก็บไว้ในตัวแปล local

var searchBox = $(‘#<%=TextBox1.ClientID%>’) ; //นี่คือวิธีการระบุ ID ของ Control ที่สร้างจาก ASP.NET

2.ที่ focus event ของ searchBox เราจะใส่เงื่อนไข ตรวจสอบคือ ถ้า text ค้นหา เท่ากับ ค่าที่ tooltip หรือ default text ของเราให้เอา CSS defaultText ออก

และให้ค่าใน text box เป็นค่าว่างเพื่อพร้อมให้ผู้ใช้กรอกข้อมูลลงไป

searchBox.focus( function() {
if (searchBox.val() == this.title) {

searchBox.removeClass(“defaultText”);

searchBox.val(“”);

}
});

3. ในกรณีที่ผู้ใช้ ออกไปจาก text box แล้วถ้าไม่ได้ใส่อะไรลงไปที่ text box เลยแน่นอน เราจะต้องเติม default เข้าไปเหมือนเดิมพร้อมกับ CSS (font สี่เท่า และ เอียง)

searchBox.blur( function() {
if (searchBox.val() == “”) {

searchBox.addClass(“defaultText”);

searchBox.val(this.title);

}
});

searchBox.blur();

เสร็จแล้วครับ นี่คือรหัส jQuery ที่สร้างกลไก ใส่ default text ไว้ใน TextBox ให้เราครับ

$(document).ready(function() {
var searchBox = $(‘#<%=TextBox1.ClientID%>’);
searchBox.focus(
function() {
if (searchBox.val() == this.title) {
searchBox.removeClass(“defaultText”);
searchBox.val(“”);
}
});

searchBox.blur(
function() {
if (searchBox.val() == “”) {
searchBox.addClass(“defaultText”);
searchBox.val(this.title);
}
});
searchBox.blur();
});

ข้อแนะนำเพิ่มเติม

  • ใช้เทคนิคนี้เพื่อแทน Label ที่อยู่หน้า TextBox อื่นๆก็ได้ จะทำให้หน้าจอเราโล่งขึ้นเยอะเลย
Advertisements

#asp-net, #jquery