Erstellen Sie eine personalisierte und leistungsstarke virtuelle Jquery-Tastatur (VirtualKeyboard)_jquery

In einem aktuellen Projekt war ich für das Frontend der Webseite verantwortlich. Der Kunde benötigte zur Bedienung einen Touchscreen, ohne externe Maus und Tastatur, musste aber auch Text eingeben können Zahlen, Englisch und Chinesisch. Nachdem ich darüber nachgedacht hatte, entschied ich mich, JS zur Implementierung der virtuellen Tastatur zu verwenden.

Zuerst suchte ich im Internet nach einer virtuellen JS-Tastatur. Nach sorgfältiger Prüfung verliebte ich mich in VirtualKeyboard, ein leistungsstarkes virtuelles JS-Tastatur-Plug-in.

Lassen Sie uns kurz VirtualKeyboard vorstellen. Es verfügt über mehr als 100 integrierte Tastaturlayouts, mehr als 200 Eingabemethoden, 9 Sätze optionaler Skin-Pläne und unterstützt selbst erstellte Eingabemethoden.

Fügen Sie zuerst die Download-Adresse hinzu: http://www.corallosoftware.it/Download/download.html Dieses Tutorial verwendet 3.71 und bietet keinen separaten Download Bei Bedarf können Sie meine modifizierte Version am Ende des Artikels herunterladen

Schauen Sie sich nach dem Herunterladen zuerst das Demodokument an und öffnen Sie dann Jsvkjscriptsdemo_inline.html. Sie können sehen, dass die virtuelle Tastatur sehr schön ist und chinesische Pinyin-Eingaben unterstützt, was völlig den Erwartungen entspricht. Wie unten gezeigt:

In das Projekt integrieren und einfach machen!

Kopieren Sie zunächst die Dateien im Jsvkjscripts-Verzeichnis in das Projekt. Die Textdateien und HTML-Demonstrationsdateien können gelöscht werden.

JS-Dateien, auf die auf der Projektseite verwiesen wird:

Code kopieren Der Code lautet wie folgt:

Erklären Sie: vk_layout=CN Chinese Simpl. bedeutet, dass die Standardeingabemethode auf vereinfachtes Chinesisch eingestellt ist,

vk_skin=flat_gray bedeutet, dass flat_gray als Standard-Skin ausgewählt ist. Diese beiden können je nach persönlichem Bedarf eingestellt werden.

Funktion zum Aufrufen/Ausblenden der virtuellen Tastatur:

VirtualKeyboard.toggle("txt_Search", "softkey");
txt_Search ist die ID des Textfelds und softkey ist die ID des Elements, in dem die virtuelle Tastatur angezeigt wird.

Hier ist ein einfaches Beispiel:

Code kopieren Der Code lautet wie folgt:

​​ ​



                                                                                                                                                                                                        
 

Wirkung:

Passen Sie die Funktionen, die Sie benötigen, Schritt für Schritt an

Die Grundfunktionen sind implementiert und der nächste Schritt besteht darin, zwischen Chinesisch und Englisch zu wechseln. Klicken Sie zunächst auf die Feststelltaste, um auf Großbuchstaben umzuschalten, und versuchen Sie es, aber das Ergebnis ist enttäuschend. Beim Umschalten auf Großbuchstaben im chinesischen Modus ist die Eingabe immer noch chinesisch. Sie können nur auf das Auswahlmenü für die Eingabemethode in der unteren rechten Ecke klicken, nach US suchen und zur englischen Eingabemethode wechseln. Das ist nicht möglich. Sie müssen jedes Mal zwischen Hunderten von Optionen hin und her wechseln.

Also hatte ich eine vorläufige Idee, löschte die Dropdown-Liste und erstellte manuell eine Liste mit nur chinesischen und englischen Optionen. Um die Dropdown-Liste zu löschen, müssen Sie zunächst ihre ID kennen. Diese Art von Ebene wird normalerweise dynamisch erstellt. Daher habe ich Jsvkjscriptsvirtualkeyboard.js gefunden und geöffnet. Der Code ist komprimiert und kann direkt gelesen werden. Also müssen wir es zuerst dekomprimieren. Öffnen Sie http://jsbeautifier.org/, kopieren Sie den Code in der JS-Datei in das Eingabefeld, klicken Sie auf die Schaltfläche und die Dekomprimierung ist abgeschlossen. Strg A, Strg C zum Kopieren in die neue JS-Datei, OK, Sie können sie lesen. Suchen Sie nach dem Schlüsselwort „

"" ""
kb_mappingselector ist die ID des Auswahlfelds für das Tastaturlayout, kb_langselector ist die ID des Auswahlfelds für die Eingabemethode und kb_langselector ist die gewünschte ID.

Mit der ID kann sie geändert werden. Da sie dynamisch erstellt wird, kann ihre ID erst nach Abschluss der Erstellung abgerufen werden. Daher habe ich den Code geschrieben, nachdem die virtuelle Tastatur geladen wurde.

Der folgende Code verwendet das JQuery-Framework und muss referenziert werden, bevor er normal verwendet werden kann.

Code kopieren Der Code lautet wie folgt:

Funktionstest(){
$("#kb_langselector").empty().append("English中文 VirtualKeyboard.switchLayout(this.value);return false;
});
}

Nach dem Testen habe ich ein Problem festgestellt. Der Ladevorgang wurde bei 10 % gestoppt und die Seite meldete einen JS-Fehler.

Aufgrund der Fehlerbeschreibung habe ich wahrscheinlich vermutet, dass es ein Problem mit der von mir erstellten Option gab, aber ich konnte das spezifische Problem nach mehreren Spuren und Debugging nicht finden. Wenn jemand den Fehler findet, hoffe ich, dass Sie mich aufklären können !

Wenn Sie auf einen Fehler stoßen, den Sie längere Zeit nicht beheben können, ändern Sie Ihre Meinung!

Die ursprüngliche Idee ist gescheitert, also habe ich es mir anders überlegt. Da mit dem, was ich gebaut habe, etwas nicht stimmte, werde ich es nicht selbst bauen, aber ich brauche das zusätzliche Zeug nicht.

Dieser Idee folgend habe ich den Ladecode noch einmal studiert und festgestellt, dass das von der Eingabemethode geladene JS in Jsvkjscriptslayoutslayouts.js definiert ist. Deshalb habe ich die überflüssigen Optionen entschieden gestrichen und nur noch zwei Optionen übrig: Chinesisches Pinyin und US. Die Darstellungen nach der Änderung sind wie folgt. Es gibt nur zwei Optionen: Chinesisch und Englisch, was viel sauberer ist.

Das ist nicht das, was ich will!

Das Umschalten zwischen Chinesisch und Englisch wurde implementiert, aber die Bedienung ist nicht bequem genug. Was ich brauche, ist ein Umschalten mit einem Klick auf der Tastatur.

Suchen Sie zuerst die Skin-Datei Jsvkjscriptscssflat_graybutton_set.png. Ich möchte selbst eine Schaltfläche hinzufügen!

Originalbild:

Nach der Änderung:

Nur das Bild zu ändern reicht definitiv nicht aus. Der Button wird im Stylesheet positioniert und verändert das Stylesheet weiter! Fügen Sie den folgenden Code am Ende des Stylesheets Jsvkjscriptscssflat_graykeyboard.css hinzu.

Code kopieren Der Code lautet wie folgt:

#kbDesk div#kb_binput_method {
float: rechts;
Breite: 102px;
}
#kbDesk div#kb_binput_method a {
        Hintergrundposition: -453px 0px;
}
#kbDesk div#kb_binput_method.kbButtonBewegen Sie den Mauszeiger über ein {
        Hintergrundposition: -453px -38px;
}
#kbDesk div#kb_binput_method.kbButtonDown ein {
        Hintergrundposition: -453px -76px;
}

Als nächstes müssen Sie Ereignisse für die Schaltfläche in der JS-Datei definieren. Öffnen Sie virtualkeyboard.js und suchen Sie

Code kopieren Der Code lautet wie folgt:

var C = {
14: 'Rücktaste',
15: 'Tab',
28: 'Eintreten',
29: 'Großbuchstaben',
41: 'shift_left',
52: 'shift_right',
53: 'del',
54: 'ctrl_left',
55: 'alt_left',
56: 'Leerzeichen',
57: 'alt_right',
58: 'ctrl_right'
};

Fügen Sie unten 59: „input_method“ hinzu. Denken Sie daran, nach „ctrl_right“ ein Komma einzufügen. Nach der Änderung:

Code kopieren Der Code lautet wie folgt:

var C = {
14: 'Rücktaste',
15: 'Tab',
28: 'Eintreten',
29: 'Großbuchstaben',
41: 'shift_left',
52: 'shift_right',
53: 'del',
54: 'ctrl_left',
55: 'alt_left',
56: 'Leerzeichen',
57: 'alt_right',
58: 'ctrl_right',
59: 'input_method'
};

Suchen Sie weiterhin nach dem Antwortcode für den Klick auf die Schaltfläche:

Code kopieren Der Code lautet wie folgt:

var d = Funktion (i) {
        var e = DOM.getParent(i.srcElement || i.target, 'a');
        if (!e || e.parentNode.id.indexOf(Q) < 0) return;
        e = e.parentNode;
        var iI = X;
        var il = e.id.substring(Q.length);
        Schalter (il) {
            Fall „caps“:
                iI = iI ^ s;
                Pause;
            case „shift_left“:
            case „shift_right“:
                if (i.shiftKey) break;
                iI = iI ^ Z;
                Pause;
            case „alt_left“:
            case „alt_right“:
            case „ctrl_left“:
            case „ctrl_right“:
                iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);
                Pause;
            Standard:
                if (_) DOM.CSS(e).addClass(y.buttonDown);
                Pause
        }
        if (X != iI) {
            B(iI);
            b();
        }
        i.preventDefault();
        i.stopPropagation();
    };

　　修改为：

复制代码 代码如下:

var d = Funktion (i) {
        var e = DOM.getParent(i.srcElement || i.target, 'a');
        if (!e || e.parentNode.id.indexOf(Q) < 0) return;
        e = e.parentNode;
        var iI = X;
        var il = e.id.substring(Q.length);
        Schalter (il) {
            Fall „caps“:
                iI = iI ^ s;
                Pause;
            case „input_method“:
                if (document.getElementById("kb_langselector").value == 'US US') {
                    VirtualKeyboard.switchLayout("CN Chinese Simpl. Pinyin");

                }
                sonst {
                    VirtualKeyboard.switchLayout("US US");

                }
                Pause;
            case „shift_left“:
            case „shift_right“:
                if (i.shiftKey) break;
                iI = iI ^ Z;
                Pause;
            case „alt_left“:
            case „alt_right“:
            case „ctrl_left“:
            case „ctrl_right“:
                iI = iI ^ (i.altKey << 1 ^ w) ^ (i.ctrlKey << 2 ^ W);
                Pause;
            Standard:
                if (_) DOM.CSS(e).addClass(y.buttonDown);
                Pause
        }
        if (X != iI) {
            B(iI);
            b();
        }
        i.preventDefault();
        i.stopPropagation();
    };

　　既然有了按钮，就不需要显示下面的下拉框了，所以，给它隐藏掉！

　　OK，大功告成！看下效果图

　　外观和功能搞定了，但一看它的文件夹，足足7M多，精简！精简过程就不写啦，精简完成后:

　　写了这么多，谢谢你能把它看完，最后放上全部修改精简完成之后的源码！

http://www.jb51.net/jiaoben/228716.html