Maison >interface Web >js tutoriel >JQUERY sur le plugin de clavier à écran

JQUERY sur le plugin de clavier à écran

Joseph Gordon-Levitt
Joseph Gordon-Levittoriginal
2025-03-04 00:55:09523parcourir

Ce plugin de clavier JQuery à l'écran fournit un clavier virtuel personnalisable pour une utilisation améliorée du site Web. Il est similaire au clavier d'accessibilité de Windows, apparaissant lorsqu'un champ de saisie est cliqué.

jQuery on Screen Keyboard Plugin

Implémentation:

  1. Télécharger: Obtenez les fichiers du plugin.
  2. Code de base: Utilisez le fourni demo.js comme point de départ.
  3. Disposition et paramètres: Modifier la disposition et les paramètres du clavier (voir les exemples de code ci-dessous).
  4. Style CSS: Personnalisez le CSS pour correspondre à la conception de votre site Web.

Liens de téléchargement et de démonstration: Page de téléchargement , Demo en direct

jQuery Code Exemples:

Clavier QWerty de base:

$(document).ready(function(){
  $('.qwerty').keyboard({ layout: 'qwerty' });
});

Clavier numérique avec restrictions:

$(document).ready(function(){
  $('#num').keyboard({
    layout: 'num',
    restrictInput: true,
    preventPaste: true,
    autoAccept: true
  });
});

Extension du simulateur de frappe:

$(function() {
  $('.ui-keyboard-input').addTyping();
});

Clavier déclenché par l'hyperlien:

Cet exemple montre comment afficher le clavier lorsqu'un hyperlien est cliqué, en concentrant un champ de saisie caché:

$('.hiddenInput').click(function(){
  $('#hidden').trigger('focus');
  return false;
});

$('#hidden').keyboard({
  layout: 'qwerty',
  position: {
    of: $('.hiddenInput'),
    my: 'center top',
    at: 'center top'
  }
});

N'oubliez pas de remplacer les liens d'espace réservé par les URL de téléchargement et de démonstration réelles. Cette description révisée fournit une explication plus claire et plus concise de la fonctionnalité et de l'utilisation du plugin.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn