Maison >interface Web >Questions et réponses frontales >Qu'est-ce que l'événement HTML de perte de focus ?
Qu'est-ce que l'événement HTML de perte de focus ?
- PHPzoriginal
- 2023-04-25 15:11:184714parcourir
HTML est un langage très couramment utilisé dans le développement Web. Il peut construire la structure et le contenu des pages Web. Cependant, dans le développement réel, il est souvent nécessaire de surveiller les changements de comportement des éléments HTML, tels que les événements de focus. L'événement HTML de perte de focus est un événement déclenché lorsque l'utilisateur supprime le focus de l'élément actuel. Cet article présentera ce qu'est l'événement HTML de perte de focus et comment l'utiliser dans le développement Web.
1. Qu'est-ce que l'événement HTML de perte de focus
L'événement HTML de perte de focus fait référence à un événement déclenché lorsque l'utilisateur supprime le focus de l'élément actuel. Dans les applications pratiques, le focus fait référence à l'élément ou au contrôle que l'utilisateur utilise, qui peut être une zone de texte, un bouton, un lien ou un autre élément HTML. Une fois que l'utilisateur a saisi ou opéré un élément, s'il clique ailleurs sur la page ou appuie sur la touche Tab pour passer à l'élément suivant, l'élément précédent perdra le focus et déclenchera un événement de perte de focus.
L'événement HTML de perte de focus peut être utilisé pour valider les données saisies par l'utilisateur, effectuer une opération ou effacer le contenu saisi par l'utilisateur. Vous pouvez associer une fonction à l'événement de perte de focus en définissant l'attribut onBlur sur l'élément. Par exemple :
<input type="text" name="username" onBlur="checkUsername()">
Le code ci-dessus définit un élément de zone de texte Lorsque l'utilisateur supprime le focus de l'élément, la fonction checkUsername() sera exécutée.
2. Les scénarios d'application de l'événement HTML de perte de focus
L'événement HTML de perte de focus peuvent être appliqués à une variété de scénarios. Voici quelques scénarios d'application courants :
1. Vérification du formulaire : lorsque l'utilisateur saisit des données, il peut vérifier si le format, la longueur, etc. des données répondent aux exigences lorsque la zone de saisie perd le focus.
2. Correspondance du mot de passe : lorsque l'utilisateur saisit un mot de passe, lorsque la deuxième zone de saisie perd le focus, il peut être vérifié si les deux mots de passe saisis sont cohérents.
3. Sauvegarde automatique : lorsque l'utilisateur saisit ou modifie des données, l'opération de sauvegarde peut être effectuée lorsque la zone de saisie perd le focus pour garantir que les données ne sont pas perdues.
4. Invite de saisie : lorsque l'utilisateur saisit du contenu dans la zone de saisie, lorsque la zone de saisie perd le focus, la technologie Ajax peut être utilisée pour envoyer une requête au serveur et renvoyer les informations d'invite correspondantes.
5. Fonction d'impression : une fois que l'utilisateur a saisi le contenu dans la zone de saisie, la fonction d'impression peut être appelée lorsque la zone de saisie perd le focus pour implémenter la fonction d'impression.
3. Comment utiliser l'événement HTML de perte de focus
L'utilisation de l'événement HTML de perte de focus nécessite les étapes suivantes :
- Défini en HTML elements onBlur et définissez-le sur le nom d'une fonction JavaScript qui sera exécutée lorsque l'événement de perte de focus est déclenché.
- Écrivez une fonction JavaScript pour gérer l'événement de perte de focus. Par exemple, vous pouvez valider des données saisies ou effectuer une action dans une fonction.
Ce qui suit est un exemple qui montre comment vérifier le numéro de téléphone saisi par l'utilisateur lorsque la zone de saisie perd le focus :
<html>
<head>
<script type="text/javascript">
function checkPhone(phone) {
var regex = /^1[3|4|5|7|8][0-9]{9}$/; //正则表达式，验证输入的电话号码是否合法
if (regex.test(phone.value)) {
alert("电话号码格式正确！");
} else {
alert("电话号码格式错误，请重新输入！");
phone.focus(); //使输入框重新获得焦点
}
}
</script>
</head>
<body>
请输入电话号码：<input type="text" name="phone" onBlur="checkPhone(this)">
</body>
</html>
Le code ci-dessus définit un Élément de la zone de saisie, lorsque l'utilisateur supprime le focus de la zone de saisie, la fonction checkPhone() sera exécutée, qui est utilisée pour vérifier si le numéro de téléphone saisi par l'utilisateur est légal. Si le format du numéro de téléphone saisi est correct, une boîte de dialogue apparaîtra, sinon la zone de texte sera recentrée afin que l'utilisateur puisse la saisir à nouveau.
4. Résumé
L'événement HTML de perte de focus est un événement déclenché lorsque l'utilisateur supprime le focus de l'élément actuel. Dans le développement Web, il propose de nombreux scénarios d'application, tels que la validation de formulaire, la correspondance de mot de passe, la sauvegarde automatique, etc. L'utilisation de l'événement HTML Lost Focus nécessite de définir l'attribut onBlur dans l'élément HTML et d'écrire une fonction JavaScript pour le gérer. J'espère que cet article pourra aider les lecteurs à mieux appliquer les événements HTML de perte de focus et à améliorer l'efficacité et la qualité du développement de pages Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!