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

最近のプロジェクトで、私は 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("English中文 VirtualKeyboard.switchLayout(this.value);return false;
});
}

テスト後、読み込みが 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 = {
14: 'バックスペース'、
15: 'タブ'、
28: '入る'、
29: 'キャップ'、
41: 'shift_left'、
52: 'shift_right',
53: 'デル'、
54: 'ctrl_left',
55: 'alt_left',
56: 'スペース'、
57: 'alt_right',
58: 'ctrl_right'
};

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

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

var C = {
14: 'バックスペース'、
15: 'タブ'、
28: '入る'、
29: 'キャップ'、
41: 'shift_left'、
52: 'shift_right',
53: 'デル'、
54: 'ctrl_left',
55: 'alt_left',
56: 'スペース'、
57: 'alt_right',
58: 'ctrl_right',
59: '入力メソッド'
};

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

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

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();
    };

　　

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

外观及び機能搞定，但一看它的文章夹，足足7M多，精简！精简过程就不写啦，精简完了後：

写了这么多，谢谢你能把它看完，最後放上全部修改精简完了後的资源网！

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。