communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > 基于jQuery的输入框无值自动显示指定数据的实现代码_jquery

基于jQuery的输入框无值自动显示指定数据的实现代码_jquery

WBOY
Libérer： 2016-05-16 18:11:29
original
1002 Les gens l'ont consulté

【解决方案】

　　1. 准备工作

　　（1）输入框

复制代码 代码如下:



　　（2）CSS代码
复制代码 代码如下:

input.helpText { color: #aaa;}

（3）转换方法
复制代码 代码如下:

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）具体实现
复制代码 代码如下:

$('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. 参考文章
http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/
Étiquettes associées：
输入框
source：php.cn
Article précédent：JQuery动态给table添加、删除行 改进版_jquery Article suivant：javascript对数组的常用操作代码 数组方法总汇_javascript技巧
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con...
Depuis 2024-04-06 18:59:57
0
1
442
Obtenez la valeur de retour totale de la méthode du champ de saisie J'essaie de trouver la valeur totale saisie par l'utilisateur. Obtenez un agrégat qui mult...
Depuis 2024-04-06 18:19:37
0
1
380
Requête d'enregistrement dans des conditions de valeur partielle - Partage de compétences SQL J'ai une table appelée code postal qui comporte une colonne appelée code. La colonne Code ...
Depuis 2024-04-06 16:01:26
0
1
395
Même après l'effacement, la valeur de mon entrée de fichier reste Comme vous pouvez le voir sur la capture d'écran. Je sélectionne un fichier, conserve la f...
Depuis 2024-04-06 15:44:52
0
1
384
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal