Comment un programme javascript obtient-il la valeur de la clé du téléphone ?

Avec la popularité des smartphones dans la vie des gens, de plus en plus de sites Web et d'applications commencent à s'adapter aux appareils mobiles. Sur le terminal mobile, la méthode de saisie de l'utilisateur est également différente de celle sur les ordinateurs traditionnels. L'une des différences significatives est la méthode de saisie. Pour les pages Web et les applications, comment gérer les entrées des utilisateurs et obtenir des valeurs clés correctes sur les appareils mobiles est devenu un problème important.

JavaScript est un langage de programmation couramment utilisé dans les applications frontales. Dans le processus de développement HTML5 mobile, la plupart des entrées des utilisateurs doivent être traitées et filtrées. Par conséquent, apprendre à obtenir une saisie au clavier sur des appareils mobiles devient une tâche importante.

De manière générale, sur les ordinateurs, nous obtiendrons les informations saisies par les utilisateurs grâce à l'écoute d'événements. Pour obtenir les informations de saisie au clavier de l'utilisateur sur les appareils mobiles, nous pouvons utiliser les méthodes suivantes :

1. KeyboardEvent

dans le navigateur de bureau, nous pouvons obtenez généralement les valeurs des clés de l'utilisateur grâce à la surveillance des événements du clavier, tels que les caractères du clavier ou les touches de fonction. De même, sur les appareils mobiles, nous pouvons également y parvenir de la même manière.

En JavaScript, il existe un écouteur d'événement sur l'objet Window, à savoir "keydown", qui peut renvoyer la valeur de la touche enfoncée. On peut utiliser cet événement pour écouter les actions de l'utilisateur sur le mobile. Fonctionnement des touches.

window.addEventListener('keydown', function(event) {
  console.log(event.key);
});

Lorsque l'utilisateur appuie sur une touche sur un appareil mobile, cet événement est déclenché et la valeur de la touche enfoncée est transmise à la console. Cette valeur peut être facilement utilisée pour divers jugements logiques et traitements de données.

Cependant, dans certains cas, nous devrons peut-être obtenir davantage d'informations clé-valeur. Il convient de noter que sur les appareils mobiles, les objets d'événement clavier sont différents de ceux des navigateurs de bureau. Sur les appareils mobiles, l'objet événement clavier contient plus de propriétés, par exemple si la touche Alt, Shift ou Ctrl a été enfoncée, si une touche de fonction a été enfoncée, etc.

Donc, si nous avons besoin d'obtenir ces informations supplémentaires sur la valeur clé, nous pouvons utiliser d'autres propriétés fournies par l'objet événement clavier. Par exemple, nous pouvons utiliser l'attribut code pour obtenir le code clé correspondant à la touche :

window.addEventListener('keydown', function(event) {
  console.log(event.code);
});

Après avoir utilisé ce code, nous pouvons voir le code clé de la touche enfoncée dans les informations sorties par la console . Ce code clé est un nombre qui représente la valeur de la clé virtuelle correspondant à la touche enfoncée. Cette valeur est unique sur tous les claviers et est indépendante de la langue de saisie et de la disposition du clavier de l'utilisateur.

De plus, nous pouvons également utiliser d'autres propriétés de KeyEvent pour obtenir d'autres informations sur les événements du clavier. Par exemple, nous pouvons utiliser event.key pour obtenir les caractères correspondant à l'événement clavier :

window.addEventListener('keydown', function(event) {
  console.log(event.key);
});

Sur les appareils mobiles, l'objet événement clavier peut renvoyer des caractères différents selon la méthode de saisie de l'utilisateur et les paramètres régionaux actuels. . Donc, pour obtenir le caractère correct, nous devons l’obtenir en utilisant la propriété event.key.

2. Événement d'entrée

En plus d'utiliser les événements de clavier, nous pouvons également utiliser les événements d'entrée pour surveiller les entrées des utilisateurs sur les appareils mobiles. Contrairement aux événements de clavier, les événements de saisie peuvent être utilisés pour surveiller toute saisie utilisateur, y compris l'écriture manuscrite et la saisie vocale.

var inputElement = document.getElementById('input-element');

inputElement.addEventListener('input', function(event) {
  console.log(event.target.value);
});

Ce code utilise l'événement d'entrée pour surveiller l'entrée de l'élément d'entrée et afficher la valeur saisie par l'utilisateur sur la console. Dans la fonction de gestion des événements, nous pouvons utiliser event.target pour obtenir l'objet élément saisi afin d'obtenir la valeur de la zone de saisie.

Il est à noter que les événements de saisie sur iOS et Android sont légèrement différents. Sur iOS, l'événement d'entrée n'est déclenché que lorsque la saisie est terminée. Sur Android, l'événement d'entrée peut être déclenché lorsque l'utilisateur effectue une saisie.

3. Événement tactile

Une autre façon d'obtenir la contribution de l'utilisateur sur un appareil mobile consiste à utiliser les événements tactiles. Les événements tactiles sont des types d’événements spécialement conçus pour surveiller les opérations tactiles sur les appareils mobiles. Si votre site Web ou votre application doit prendre en charge la saisie gestuelle et les opérations tactiles, l'utilisation des événements Touch est un bon moyen.

En JavaScript, vous pouvez utiliser les événements touchstart et touchend pour obtenir les opérations d'appui et de relâchement lorsque l'utilisateur touche le périphérique d'entrée avec ses doigts. Si vous devez détecter si l'utilisateur effectue un appui long, vous pouvez utiliser l'événement touchmove pour capturer l'opération de l'utilisateur et déterminer si le doigt est dans la même position (cela indique généralement une opération d'appui long).

var touchElement = document.getElementById('touch-element');

touchElement.addEventListener('touchstart', function(event) {
  console.log('Touch started');
});

touchElement.addEventListener('touchend', function(event) {
  console.log('Touch ended'); 
});

touchElement.addEventListener('touchmove', function(event) {
  if (event.touches.length == 1) {
    console.log('Long press detected');
  }
});

Dans ce code, nous utilisons les événements touchstart, touchend et touchmove pour détecter l'opération tactile de l'utilisateur. Lorsque l'utilisateur appuie ou relâche son doigt, la console affichera « Toucher démarré » et « Toucher terminé » ; lorsque l'utilisateur appuie longuement, la console affichera « Appui long détecté ».

Il convient de noter qu'il existe relativement peu de méthodes d'utilisation des événements Touch pour capturer les informations de saisie au clavier, et qu'elles ne conviennent qu'à certains scénarios spécifiques nécessitant une saisie gestuelle.

Summary

Comme nous pouvons le constater, il existe de nombreuses façons d'obtenir des informations de saisie au clavier sur les appareils mobiles. Nous pouvons utiliser des événements de clavier, des événements d'entrée et des événements Touch pour effectuer les opérations correspondantes.

Cependant, il convient de noter que la méthode pour obtenir des informations de saisie au clavier sur les appareils mobiles est plus compliquée que sur un ordinateur de bureau. Les événements de clavier et les événements tactiles peuvent se comporter différemment selon les appareils mobiles et les environnements de navigateur. Par conséquent, lors de la mise en œuvre de la fonction de saisie au clavier sur les appareils mobiles, un travail de test et de débogage suffisant doit être effectué pour garantir la compatibilité, la fiabilité et la convivialité du code.

De plus, lors de la mise en œuvre de la fonction de saisie au clavier, nous devons également prendre en compte les problèmes de sécurité. Étant donné que les scripts JavaScript sont accessibles et modifiés à volonté, les informations saisies par l'utilisateur doivent être traitées avec soin pour éviter la falsification et le vol de données. La meilleure pratique consiste à valider et filtrer les entrées des utilisateurs côté serveur pour améliorer la sécurité et la fiabilité de votre site Web et de vos applications.

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!