JQuery auf dem Bildschirm Tastatur -Plugin

Dieses JQuery On-Screen-Tastatur-Plugin bietet eine anpassbare virtuelle Tastatur für die Verbesserung der Website der Website. Es ähnelt der Tastatur von Windows 'Barrierefreiheit und wird angezeigt, wenn ein Eingangsfeld klickt.

Implementierung:

1. Download: Die Plugin -Dateien erhalten.
2. Basiscode: Verwenden Sie den angegebenen demo.js als Ausgangspunkt.
3. Layout & Einstellungen: Ändern Sie das Tastaturlayout und die Einstellungen (siehe Code -Beispiele unten).
4. CSS -Styling: passen Sie das CSS an das Design Ihrer Website an.

Download- und Demo -Links: Download -Seite , Live -Demo

jQuery -Code -Beispiele:

Grundlegende QWERTY -Tastatur:

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

numerische Tastatur mit Einschränkungen:

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

Simulator -Erweiterung:

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

Tastatur ausgelöst durch Hyperlink:

Dieses Beispiel zeigt, wie die Tastatur angezeigt wird, wenn ein Hyperlink geklickt wird, wobei ein verstecktes Eingangsfeld fokussiert wird:

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

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

Denken Sie daran, Platzhalter -Links durch die tatsächlichen Download- und Demo -URLs zu ersetzen. Diese überarbeitete Beschreibung liefert eine klarere und prägnantere Erklärung für die Funktionalität und Verwendung des Plugins.

Das obige ist der detaillierte Inhalt vonJQuery auf dem Bildschirm Tastatur -Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!