Implementation code for automatically displaying specified data when the input box has no value based on jQuery_jquery

【Solution】

　1. Preparation

　(1) Input box

Copy code The code is as follows:

　(2) CSS code

Copy code The code is as follows:

input.helpText { color: #aaa;}

(3) Conversion method

Copy code The code is as follows:

function switchText()
{
if ($(this).val() == $(this).attr('title'))
$(this).val('') .removeClass('helpText');
else if ($.trim($(this).val()) == '')
$(this).addClass('helpText').val($ (this).attr('title'));
}

(4) Specific implementation

Copy code The code is as follows:

$('input[type=text][title!=""]').each(function() {
if ($. trim($(this).val()) == '') $(this).val($(this).attr('title'));
if ($(this).val() = = $(this).attr('title')) $(this).addClass('helpText');
}).focus(switchText).blur(switchText);

$(' form').submit(function() {
$(this).find('input[type=text][title!=""]').each(function() {
if ($( this).val() == $(this).attr('title')) $(this).val('');
});
});

2. Reference article
http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery /