简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison> interface Web> js tutoriel> le corps du texte

文本框获得焦点和失去焦点的判断代码_表单特效

WBOY
Libérer： 2016-05-16 17:54:58
original
1615 Les gens l'ont consulté
文本框失去焦点事件、获得焦点事件
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
onpropertychange 当属性改变发生该事件
无论粘贴 keyup onchange等，最为敏感

先来看javascript的直接写在了input上

复制代码代码如下:




jquery实现方法

对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。

focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。
如：

复制代码代码如下:

$("p").focus(); 或$("p").focus(fn)

blur()：失去焦点时使用，和onblur一样。
如：

复制代码代码如下:

$("p").blur(); 或$("p").blur(fn)

实例

复制代码代码如下:


这里label覆盖在文本框上，可以更好的控制样式



jquery代码

复制代码代码如下:

$(function() {
$('#searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch').text('搜神马？');
});
})

好了相当的不错吧

下面是一个简单的例子：
复制代码代码如下:





Étiquettes associées：
获得焦点 失去焦点
source：php.cn
Article précédent：js判断一个元素是否为另一个元素的子元素的代码_javascript技巧 Article suivant：jQuery中将函数赋值给变量的调用方法_jquery
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
Nuxt.js SSG (générateur de site statique) Obtenez des données API Lors de la construction d'un projet à l'aide d'un générateur de site statique, je comprend...
Depuis 2023-11-16 21:36:07
0
1
176
Comment définir la méthode de définition des autorisations Laravel Spatie pour définir un ensemble d'autorisations pour chaque utilisateur en fonction du rôle ? J'ai 4 types d'utilisateurs qui utilisent mon système : 1. Super administrateurs 2. Super ...
Depuis 2023-11-14 12:58:58
0
1
292
La page dynamique Nuxt 3 change d'URL mais le contenu reste le même et les données ne sont récupérées qu'une seule fois J'ai une page produits/index et dans la page principale du produit, j'ai products/[slug] e...
Depuis 2023-11-03 14:39:04
0
1
285
jQuery obtient une mauvaise valeur lors de l'obtention de l'attribut de données J'ai un div avec l'attribut data
J'ai u...
Depuis 2023-11-01 23:01:19
0
1
209
Comment déclencher un événement de focus d'entrée dans la méthode dans Vue.js ? J'ai une entrée qui utilise l'événement suivant :
Depuis 2023-10-29 23:56:42
0
2
270
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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！