Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Implementing mouse click on text box to display and hide prompt text based on JQuery_jquery

Implementing mouse click on text box to display and hide prompt text based on JQuery_jquery

WBOY

Release： 2016-05-16 17:55:58

Original

1290 people have browsed it

For example, the search box on my website:

When not in use:

After mouse click:

It is very simple to achieve this effect with JQuery. The following is the code:

Copy the code The code is as follows:

 
$(document).ready(function () { 
var searchBox = $("#ctl00_txtSearch"); 
searchBox.focus(function () { 
if (searchBox.val() = = this.title) { // The ToolTip property of the TextBox control is converted into Html as the title property 
searchBox.val(""); 
} 
}); 
searchBox.blur(function () { 
if (searchBox.val() == "") { 
searchBox.val(this.title); 
} 
}); 
searchBox.blur(); 
 }); 

where #ctl00_txtSearch is the ID of the search box (ASP.NET can obtain this ID through ClientID)

Related labels：

hide

source：php.cn

Previous article：JavaScript Advanced Programming Reading Notes (4) Type Conversion in ECMAScript_Javascript Skills Next article："JavaScript Advanced Programming" Reading Notes (3) Reference Types in ECMAScript_Javascript Skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author