Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Implementation code for automatically displaying specified data when the input box has no value based on jQuery_jquery

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

WBOY
Release： 2016-05-16 18:11:29
Original
1002 people have browsed it

【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 /
Related labels：
Input box
source：php.cn
Previous article：JQuery dynamically adds and deletes rows to the table improved version_jquery Next article：Common javascript operation codes for arrays Summary of array methods_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
Latest Issues
Unable to get input element from website So I'm trying to get an input element from Twitter, but when I run it it keeps giving me a...
From 2024-04-06 18:59:57
0
1
442
Get the total return value of the input field method I'm trying to find the total value entered by the user. Get an aggregate that multiplies a...
From 2024-04-06 18:19:37
0
1
380
Record query under partial value conditions - SQL skill sharing I have a table called zipcode which has a column called code. The Code column contains the...
From 2024-04-06 16:01:26
0
1
395
Even after clearing, the value of my file input remains As you can see in the screenshot. I select a file, keep the popup without refreshing the p...
From 2024-04-06 15:44:52
0
1
384
Parent's padding ignored by sticky positioned child How to prevent sticky elements from going behind the header? The current code snippet uses...
From 2024-04-06 11:42:51
0
1
338
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template