jquery masquer le clavier mobile

Dans la conception Web sur les appareils mobiles, l'utilisation de zones de saisie est un élément essentiel, et la méthode de saisie sur les téléphones mobiles à écran tactile est principalement réalisée via des claviers logiciels. Cependant, dans certains scénarios spécifiques, le clavier logiciel n'est évidemment pas nécessaire. Par exemple, dans une page qui fournit uniquement des fonctions d'affichage, ou lorsque le contenu de la zone de saisie a été pré-rempli, il n'est pas nécessaire d'ouvrir le clavier logiciel. .Le clavier a disparu. À l'heure actuelle, nous devons utiliser certaines techniques pour obtenir l'effet de masquer le clavier du téléphone portable, et jQuery est un membre important de ce festin.

1. Méthodes conventionnelles de masquage du clavier

Pour contrôler l'affichage et le masquage du clavier, nous pouvons utiliser certaines API fournies par le navigateur. Les méthodes courantes incluent flou() et focus(), qui peuvent faire perdre le focus à la zone de saisie et en obtenir un. En conséquence, elles contrôlent l'affichage et le masquage du clavier.

Prenons l'exemple de la méthode flou(). Lorsque la zone de saisie est déclenchée, nous pouvons exécuter le code suivant pour masquer le clavier :

$('input, textarea').on('focus', function() {
    document.activeElement.blur();
});

De cette façon, l'effet de masquer le clavier peut être obtenu. Cependant, cette méthode empêche uniquement la zone de saisie d'obtenir le focus. Si vous souhaitez toujours utiliser cette zone de saisie pour la saisie, la sélection, etc., vous devez d'abord cliquer à nouveau sur la zone de saisie.

2. Méthodes jQuery

jQuery nous fournit des méthodes plus pratiques pour contrôler l'affichage et le masquage du clavier. Les méthodes les plus couramment utilisées sont les méthodes flou(), focus() et trigger().

1. blur()

Semblable à la méthode fournie par le navigateur, la méthode blur() fera perdre le focus à la zone de saisie actuelle. Cette méthode peut accepter une fonction de rappel en tant que paramètre. Lorsque la zone de saisie perd réellement le focus, cette fonction de rappel sera déclenchée.

$('input, textarea').blur(function() {
    // 这里是回调函数
});

2. focus()

De même, la méthode focus() peut rendre la zone de saisie actuelle plus ciblée.

$('input, textarea').focus(function() {
    // 这里是回调函数
});

3. trigger()

La méthode trigger() de jQuery peut simuler des événements spécifiques et contrôler indirectement l'affichage et le masquage du clavier de cette manière.

$('button').click(function() {
    $('input').trigger('blur');
});

Dans cet exemple, lorsque le bouton est cliqué, l'événement de flou de la zone de saisie sera déclenché. Par conséquent, la zone de saisie perd le focus, masquant le clavier.

3. Méthodes pour masquer le clavier

Enfin, nous pouvons combiner les méthodes ci-dessus pour réaliser la fonction de masquage du clavier. Voici un exemple simple :

// 绑定输入框的获取焦点事件
$('input').focus(function() {
    // 输入框获取到焦点时，立即执行 blur 事件
    $(this).blur();
});

Ce code est simple, mais il empêche le clavier logiciel d'apparaître. Lorsque vous cliquez sur la zone de saisie, l'événement focus sera déclenché, puis nous perdrons immédiatement le focus de la zone de saisie, masquant ainsi le clavier.

4. Résumé

Masquer le clavier logiciel est très nécessaire pour la conception de sites Web sur appareils mobiles dans certaines situations. Cet article présente la méthode de contrôle de l'affichage et du masquage du clavier logiciel via jQuery pour référence des lecteurs. Bien sûr, il existe d'autres méthodes qui peuvent également avoir pour effet de masquer le clavier logiciel. Les lecteurs peuvent choisir une méthode qui leur convient en fonction de la situation réelle pour atteindre cet objectif.

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!