パーソナライズされた強力な Jquery 仮想キーボード (VirtualKeyboard) を作成する

最近のプロジェクトで、私は Web ページのフロントエンドを担当しましたが、顧客は外部マウスやキーボードを使用せずにタッチスクリーンを使用して操作する必要がありましたが、数字を含むテキストを入力できる必要がありました。、英語、中国語。考えた結果、JSを使って仮想キーボードを実装することにしました。

まず、インターネットで JS 仮想キーボードを検索しました。慎重に検討した結果、強力な JS 仮想キーボードプラグインである VirtualKeyboard が気に入りました。

VirtualKeyboard を簡単に紹介します。100 を超える組み込みキーボードレイアウト、200 を超える入力メソッド、9 セットのオプションのスキンプランがあり、非常に強力です。

最初にダウンロードアドレスを添付してください。最新バージョンは 3.94 です: http://www.corallosoftware.it/Download/download.html このチュートリアルでは 3.71 を使用しており、別のダウンロードは提供されません。必要な場合は、記事の最後にある私の修正バージョンをダウンロードできます

ダウンロード後、まずデモドキュメントを確認し、Jsvkjscriptsdemo_inline.html を開くと、仮想キーボードが非常に美しく、期待どおりの中国語ピンイン入力をサポートしていることがわかります。以下に示すように:

プロジェクトに組み込んで、あとは実行するだけです。

まず、Jsvkjscripts ディレクトリ内のファイルをプロジェクトにコピーします。テキストファイルと HTML デモファイルは削除できます。

プロジェクトページで参照される JS ファイル:

コードをコピーコードは次のとおりです:

説明: vk_layout=CN 簡体字中国語ピンインは、デフォルトの入力方法が簡体字中国語、に設定されていることを意味します。

vk_skin= flat_gray は、 flat_gray がデフォルトのスキンとして選択されていることを意味します。これら 2 つは個人のニーズに応じて設定できます。

仮想キーボードの呼び出し/非表示を切り替える機能:

VirtualKeyboard.toggle("txt_Search", "ソフトキー");
txt_Search はテキストボックスの ID、softkey は仮想キーボードが表示される要素の ID です。

これは簡単な例です:

コードをコピーしますコードは次のとおりです:

<頭>

効果:

必要な機能を段階的にカスタマイズ

基本的な機能は実装されました。次のステップは中国語と英語を切り替えることです。まずCapsLockをクリックして大文字に切り替えて試してみましたが、中国語モードで大文字に切り替えると入力は中国語のままでした。右下隅にある入力方法選択メニューをクリックし、「US」を見つけて英語の入力方法に切り替えるだけです。これは不可能です。毎回、何百ものオプションを切り替えなければなりません。ユーザーエクスペリエンスはなんとも劣悪なものです。

そこで、予備的なアイデアを用意し、ドロップダウンリストをクリアして、中国語と英語のオプションのみを含むリストを手動で作成しました。ドロップダウンリストをクリアするには、まずその ID を知る必要があります。この種のレイヤーは通常、動的に作成されるので、Jsvkjscriptsvirtualkeyboard.js を見つけて開きました。予想どおり、コードは圧縮されており、直接読み取ることができます。したがって、最初にそれを解凍する必要があります。 http://jsbeautifier.org/ を開き、JS ファイル内のコードを入力ボックスにコピーし、ボタンをクリックすると解凍が完了します。 ctrl a、ctrl c を押して新しい JS ファイルにコピーすると、OK、それを読み取ることができます。「

kb_mappingselector はキーボードレイアウト選択ボックスの ID、kb_langselector は入力方法選択ボックスの ID、kb_langselector は必要な ID です。

ID を使用すると、動的に作成されるため、作成が完了した後にのみ ID を取得できるため、仮想キーボードが読み込まれた後にコードを書きました。

次のコードは JQuery フレームワークを使用しており、通常に使用する前に参照する必要があります。

コードをコピー

コードは次のとおりです:

関数テスト(){
$("#kb_langselector").empty().append("

テスト後、読み込みが 10% で停止し、ページで JS エラーが発生することがわかりました。

エラーの説明から、おそらく私が構築したオプションに問題があると推測しましたが、いくつかのトレースとデバッグを行っても具体的な問題は見つかりませんでした。もしヒーローがエラーを見つけたら、教えていただければ幸いです。！

長期間にわたってエラーが発生した場合は、考え方を変えてください。

最初のアイデアは失敗したので、私が作ったものに何か問題があったので、私はそれを自分で作ることはできませんが、余分なものは必要ありません。

このアイデアに従って、読み込みコードを再検討したところ、インプットメソッドによって読み込まれる JS は Jsvkjscriptslayoutslayouts.js で定義されていることがわかりました。そこで思い切って冗長なオプションを削除し、簡体字中国語と米国の 2 つのオプションだけを残しました。変更後のレンダリングは次のとおりです。中国語と英語の 2 つのみがあり、こちらの方がはるかにきれいです。

これは私が望んでいることではありません!

中国語と英語の切り替えが実装されましたが、操作が十分ではありません。ワンクリック切り替えが必要です。キーボードに切り替えキーを追加してみてはいかがでしょうか。

まず、スキンファイル Jsvkjscriptscss flat_graybutton_set.png を見つけます。ボタンを自分で追加したいのです。

元画像:

変更後:

画像を変更するだけでは十分ではありません。ボタンはスタイルシートに配置され、スタイルシートを変更し続けます。スタイルシート Jsvkjscriptscss flat_graykeyboard.css の最後に次のコードを追加します。

コードをコピーします

コードは次のとおりです:

#kbDesk div#kb_binput_method {

float: 右;

幅: 102px;

}

#kbDesk div#kb_binput_method a {

背景位置: -453px 0px;

}

#kbDesk div#kb_binput_method.kbButtonHover a {

背景位置: -453px -38px;

}

#kbDesk div#kb_binput_method.kbButtonDown a {

背景位置: -453px -76px;

}

次に、JS ファイルでボタンのイベントを定義する必要があります。 virtualkeyboard.js を開いて

を見つけます

コードをコピーしますコードは次のとおりです:

var C = {

'バックスペース'、

'タブ'、

'入る'、

'キャップ'、

'shift_left'、

'shift_right',

'デル'、

'ctrl_left',

'alt_left',

'スペース'、

'alt_right',

'ctrl_right'

};

以下に 59: 'input_method' を追加します。'ctrl_right' の後にカンマを忘れずに追加してください。変更後:

コードをコピーしますコードは次のとおりです:

var C = {

'バックスペース'、

'タブ'、

'入る'、

'キャップ'、

'shift_left'、

'shift_right',

'デル'、

'ctrl_left',

'alt_left',

'スペース'、

'alt_right',

'ctrl_right',

'入力メソッド'

};

ボタンクリックの応答コードを探し続けます:

コードをコピーコードは次のとおりです:

var d = 関数 (i) {

        var e = DOM.getParent(i.srcElement || i.target, 'a');

        if (!e || e.parentNode.id.indexOf(Q) 
        e = e.parentNode;

        var iI = X;

        var il = e.id.substring(Q.length);

        スイッチ (il) {

            ケース「キャップ」:

                iI = iI ^ s;

                休憩;

            ケース "shift_left":

            ケース "shift_right":

                if (i.shiftKey) Break;

                iI = iI ^ Z;

                休憩;

            case "alt_left":

            case "alt_right":

            case "ctrl_left":

            case "ctrl_right":

                iI = iI ^ (i.altKey 
                休憩;

            デフォルト:

                if (_) DOM.CSS(e).addClass(y.buttonDown);

                休憩

        }

        if (X != iI) {

            B(iI);

            b();

        }

        i.preventDefault();

        i.stopPropagation();

    };

修正内容：

复制代码代码如下:

var d = 関数 (i) {
        var e = DOM.getParent(i.srcElement || i.target, 'a');
        if (!e || e.parentNode.id.indexOf(Q)         e = e.parentNode;
        var iI = X;
        var il = e.id.substring(Q.length);
        スイッチ (il) {
            ケース「キャップ」:
                iI = iI ^ s;
                休憩;
            case "input_method":
                if (document.getElementById("kb_langselector").value == 'US US') {
                    VirtualKeyboard.switchLayout("CN 簡体字ピンイン");

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

}
                休憩;
            ケース "shift_left":
            ケース "shift_right":
                if (i.shiftKey) Break;
                iI = iI ^ Z;
                休憩;
            case "alt_left":
            case "alt_right":
            case "ctrl_left":
            case "ctrl_right":
                iI = iI ^ (i.altKey                 休憩;
            デフォルト:
                if (_) DOM.CSS(e).addClass(y.buttonDown);
                休憩
        }
        if (X != iI) {
            B(iI);
            b();
        }
        i.preventDefault();
        i.stopPropagation();
    };