jquery focus flou

jQuery est un langage de script qui permet aux développeurs de manipuler du HTML et du CSS en écrivant du code JavaScript. Il fournit de nombreuses fonctions et méthodes pratiques pour aider les développeurs à améliorer l'interactivité des pages Web. Parmi eux, la focalisation et la défocalisation sont une opération interactive courante. Cet article expliquera l'utilisation et la mise en œuvre de la focalisation et de la défocalisation dans jQuery.

1. Focus

Dans le développement Web, se concentrer signifie placer le curseur de la souris ou du clavier sur la zone de saisie ou un autre élément modifiable, ce qui en fait l'élément actuellement "actif", qui peut saisir des données ou effectuer d'autres tâches. Dans jQuery, la fonction focus peut être réalisée via la méthode focus().

Syntaxe : $(selector).focus()

Parmi eux, le sélecteur représente l'élément qui doit être ciblé, qui peut être un sélecteur tel qu'un identifiant, une classe, une étiquette, etc. Par exemple, pour vous concentrer sur l'élément avec l'identifiant d'input, vous pouvez utiliser le code suivant :

$("#input").focus();

ou utiliser le code suivant :

$("input# input").focus();

Ou utilisez le code suivant :

$("input[id='input']").focus();

Dans le code ci-dessus, différentes méthodes de sélection sont utilisées pour sélectionner les éléments qui doivent être concentrés, mais leur effet est le même.

Dans le développement réel, il est parfois nécessaire de se concentrer automatiquement sur un élément lorsque la page est chargée. Cela peut être réalisé en utilisant la méthode ready() de jQuery après le chargement de la page.

Le code est le suivant :

$(document).ready(function(){

$("#input").focus();

});

Dans le code ci-dessus, la méthode $(document).ready() est utilisée pour attendre le page à charger avant d’exécuter l’opération Focus.

2. Défocalisation

Contrairement à la mise au point, la défocalisation fait référence à l'éloignement du curseur de la souris ou du clavier de l'élément actuellement focalisé, de sorte qu'il ne soit plus un élément « actif » et ne réponde plus aux entrées ou aux opérations. Dans jQuery, une opération floue peut être réalisée grâce à la méthode blur().

Syntaxe : $(selector).blur()

Parmi eux, le sélecteur représente l'élément qui doit être flou, qui peut être un sélecteur tel qu'un identifiant, une classe, une étiquette, etc. Par exemple, pour défocaliser l'élément dont l'identifiant est saisi, vous pouvez utiliser le code suivant :

$("#input").blur();

ou utiliser le code suivant :

$("input#input" .blur() ;

Ou utilisez le code suivant :

$("input[id='input']").blur();

De même, la défocalisation peut également être automatiquement réalisée lors du chargement de la page, ou une fois la page chargée, utilisez la méthode ready() de jQuery pour y parvenir.

Le code est le suivant :

$(document).ready(function(){

$("#input").blur();

});

3. Exemple d'application

Ci-dessous, nous utilisons un exemple d'application pour montrer l'effet d'application de focus et défocalisation.

Le code est le suivant :

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<title>jQuery聚焦失焦</title>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">

    #input{

        width: 200px;

        height: 30px;

        font-size: 16px;

    }

    #result{

        margin-top: 20px;

        font-size: 16px;

    }

</style>

<script type="text/javascript">

    $(document).ready(function(){

        $("#input").focus(function(){

            $(this).css("background-color", "#f2f2f2");

        });

        $("#input").blur(function(){

            $(this).css("background-color", "#ffffff");

        });

        $("#btn").click(function(){

            $("#result").text($("#input").val());

        });

    });

</script>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

<input type="text" id="input" placeholder="请输入信息" />

<button id="btn">获取</button>

<div id="result">聚焦失焦效果演示</div>

4e1b5928d01086a542b2fffa0cb440a6

< ;/html>

Dans le code ci-dessus, une zone de saisie et un bouton sont d'abord définis. L'utilisateur peut saisir des informations dans la zone de saisie et cliquer sur le bouton pour afficher les informations sur la page. Dans jQuery, les méthodes focus() et blur() sont utilisées pour obtenir des effets de mise au point et de défocalisation. Lorsque la zone de saisie est mise au point, la couleur d'arrière-plan devient grise et lorsqu'elle est défocalisée, la couleur d'arrière-plan devient blanche. Dans le même temps, la méthode click() est utilisée pour implémenter l'événement click du bouton, obtenir la valeur dans la zone de saisie et l'afficher sur la page.

Grâce au code ci-dessus, nous pouvons voir que la mise au point et la défocalisation sont une opération interactive très courante et sont également très couramment utilisées dans le développement Web. jQuery fournit des méthodes focus() et flou() pratiques pour les développeurs. pour enrichir l'expérience d'interaction avec la page et offrir aux utilisateurs une meilleure expérience d'utilisation.

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!