Comment perdre le focus et modifier le contenu dans jquery

Avec le développement continu de la technologie Web, de plus en plus de fonctions de pages Web sont réalisées non plus via le développement de programmes back-end, mais via des bibliothèques JS frontales telles que JavaScript et jQuery. Parmi elles, l'interaction entre les pages est une fonction relativement courante et l'interaction entre les formulaires est la plus courante. Cet article explique comment utiliser jQuery pour modifier automatiquement le contenu de la balise correspondante lorsque la zone de saisie du formulaire perd le focus.

1. Connaissances préalables

Avant de présenter comment utiliser jQuery pour modifier le contenu de la balise , nous devons comprendre certaines connaissances de base.

1. Version jQuery

La dernière version de jQuery est 3.x, et le responsable a arrêté de maintenir 1.x et 2.x. Par conséquent, cet article utilisera la dernière version de jQuery, jQuery 3.x.

2. Selector

Selector est l'un des concepts très importants de jQuery. Il peut sélectionner des éléments en fonction de leur nom de balise, de leur nom de classe, de leur identifiant et d'autres attributs. Par exemple, le sélecteur $('input[type="text"]') peut sélectionner toutes les zones de saisie de texte de la page.

3. Événements

En JavaScript, les événements sont un concept très courant. Il fait référence au comportement déclenché par une certaine opération dans le DOM (Document Object Model), comme les clics, les mouvements de souris, etc. Dans jQuery, les événements peuvent être liés à l'aide de la méthode on(), par exemple : $('button').on('click', function(){ alert('Button clicked'); }).

2. Comment implémenter la

1. Partie HTML

En HTML, nous devons définir la zone de saisie de texte et la balise Par exemple :

<input type="text" id="txtName" />
<span id="spnName"></span>

Parmi elles, la balise input est utilisée pour recevoir les entrées de l'utilisateur, et la balise span est utilisée pour afficher le contenu saisi par l'utilisateur. Sa valeur initiale peut être vide.

2. partie jQuery

Dans le code jQuery, nous devons d'abord sélectionner la zone de saisie de texte, puis utiliser la méthode on() pour lier l'événement flou. Lorsque la zone de saisie de texte perd le focus, la fonction de rappel dans le code peut être exécutée. Le code spécifique est le suivant :

$(function() {
    $('#txtName').on('blur', function() {
        $('#spnName').text($(this).val());
    });
});

Parmi eux, la méthode $(this).val() est utilisée pour obtenir la valeur dans la zone de saisie de texte, tandis que la méthode $('#spnName').text() est utilisé pour définir le contenu du texte de la balise

3. Résumé

Grâce à l'introduction ci-dessus, je pense que tout le monde peut clairement comprendre la méthode d'utilisation de jQuery pour modifier automatiquement le contenu de la balise correspondante lorsque la zone de saisie du formulaire perd le focus. Bien sûr, en plus d'utiliser la méthode text() pour définir le contenu de la balise , nous pouvons également utiliser la méthode html() pour définir le contenu HTML, ou utiliser la méthode append() pour ajouter du nouveau contenu. à la balise

Enfin, il convient de noter que bien que jQuery fournisse de nombreuses méthodes pratiques pour faire fonctionner le DOM, dans le développement réel, vous devez également faire attention à l'optimisation des performances du code pour éviter d'être trop gonflé et d'affecter les performances des pages.

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!