communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > input 输入框获得/失去焦点时隐藏/显示文字(jquery版)_jquery

input 输入框获得/失去焦点时隐藏/显示文字(jquery版)_jquery

WBOY
Libérer： 2016-05-16 17:38:34
original
1240 Les gens l'ont consulté

input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图
输入框默认状态:
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)_jquery 
输入框获取焦点状态:
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)_jquery 
大家可以看效果图的搜索输入框，默认显示着“用户名/Email”的提示，当这个 input 输入框获得焦点时，就自动清空等待用户输入，当用户啥也没输入就离开这个 input 输入框时，输入框内又再次显示“用户名/Email”的提示。是不是很常见？很多搜索、登录、表单都会用到这个效果，但是我看了N多个网站，有90%以上是这么实现的：

复制代码 代码如下:



我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为：
1.完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？
2.如果要修改其中的提示文字，费时费力又不好维护。
3.我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。
那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？
具体方法如下:
首先肯定是引入jQuery
Html代码:
复制代码 代码如下:




jQuery代码:
复制代码 代码如下:




只要在实现的input输入框加上”input_test”这个class就可以轻松实现了
查看:Demo
Étiquettes associées：
input 焦点 输入框
source：php.cn
Article précédent：ExtJS下书写动态生成的xml(兼容火狐)_extjs Article suivant：form表单中去掉默认的enter键提交并绑定js方法实现代码_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
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Afficher un tableau imbriqué d'objets dans un tableau HTML en itérant J'ai l'entrée suivante contenant un tableau d'objets imbriqués. summary est le tableau d'o...
Depuis 2024-04-05 14:11:42
0
1
1373
Laisser React restituer la balise de fermeture de l'entrée ? J'ai une demande inhabituelle. Mon site Web est construit à l'aide de React et je souhaite...
Depuis 2024-04-03 23:01:01
0
1
320
Plugin Shopware 6 : Comment supprimer la configuration booléenne et la migrer vers une configuration à sélection multiple J'ai un plugin Shopware6 qui est actuellement configuré avec une valeur booléenne reviewSk...
Depuis 2024-04-03 23:09:28
0
1
410
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