Comment fermer le clavier iOS dans jquery

Dans le développement Web mobile, nous devons parfois fermer le clavier logiciel une fois que la zone de saisie est active pour mieux afficher le contenu de la page. Dans le système iOS, jQuery peut être utilisé pour réaliser cette fonction. Ci-dessous, nous présenterons en détail la méthode d’implémentation du code correspondante.

1. Introduction

jQuery est une bibliothèque JavaScript très puissante qui nous fournit des opérations DOM et des méthodes de liaison d'événements pratiques. En utilisant jQuery, nous pouvons facilement manipuler des éléments DOM, modifier des styles, lier des événements et d'autres opérations. Sous iOS, nous pouvons utiliser jQuery pour faire fonctionner la zone de saisie et réaliser la fonction de fermeture automatique du clavier logiciel.

2. Implémentation du code

L'implémentation du code de jQuery est très simple et peut être complétée avec seulement quelques lignes de code. Le code d'implémentation spécifique est le suivant :

$(document).ready(function() {
    $('input, textarea').on('focus', function(e) {
        e.preventDefault();
        $('[data-toggle="keyboard"]').blur();
    });
});

Ici, nous lions les événements focus des éléments input et textarea, lorsque la zone de saisie obtient focus , nous annulons le traitement de l'événement par défaut via la méthode e.preventDefault(), puis utilisons $('[data-toggle="keyboard"]').blur() à L'élément <input> caché sur la page gagne et perd le focus, de sorte que le clavier virtuel se ferme automatiquement. input和textarea元素的focus事件，在输入框获得焦点时，我们通过e.preventDefault()方法取消默认事件的处理，然后利用$('[data-toggle="keyboard"]').blur()将页面上隐藏的<input>元素获得焦点并失去焦点，这样软键盘就自动关闭了。

三、注意事项

在实现过程中，有几个需要注意的点：

1. 在页面中引入jQuery库，可以使用CDN引入，例：<script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

2. 由于iOS系统在软键盘弹出时会自动放大页面内容，所以需要设置viewport的meta标签。代码如下所示：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

3. 在页面上需要添加一个隐藏的<input>元素，用于在软键盘关闭时获得焦点。代码如下所示：

   <input type="text" class="keyboard" data-toggle="keyboard" style="position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0;">

   这里的data-toggle="keyboard"

   3. Notes

Pendant le processus d'implémentation, plusieurs points nécessitent une attention particulière :

1. Introduisez la bibliothèque jQuery dans la page, vous pouvez utiliser CDN pour l'introduire, par exemple : &lt ;script src= "//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

2. Puisque le système iOS agrandira automatiquement la page contenu lorsque le clavier virtuel apparaît, vous devez donc définir la balise meta de viewport. Le code est le suivant :

   rrreee🎜
3. 🎜Vous devez ajouter un élément <input> caché sur la page pour obtenir le focus lorsque le clavier virtuel est fermé. Le code ressemble à ceci : 🎜rrreee🎜L'attribut data-toggle="keyboard" ici est utilisé pour trouver l'élément dans le code jQuery. 🎜🎜🎜🎜4. Résumé🎜🎜Il est très pratique de désactiver la fonction du clavier logiciel iOS via jQuery, et cela ne prend que quelques lignes de code pour terminer. Dans le développement réel, nous pouvons effectuer les ajustements et optimisations correspondants en fonction des besoins du projet afin de mieux nous adapter aux différents scénarios et d'améliorer l'expérience utilisateur. 🎜

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!