組み込みのソリューション（たとえば、Windowsの仮想キーボード）がありますが、あなたと私が思うように、貴重なマウスを（X、Y）取得することにより、そのようなツールを使用して入力された値を決定することが理論的に可能です。 状況から抜け出すには、仮想キーボードのレイアウトをシャッフルしてください！ なに？ レイアウトをシャッフルしますか？ これは非常に不快です！ -あなたは叫ぶ。 そして、あなたはパラノイアのポイントに正しいでしょう...
正直に言うと、レイアウトをシャッフルするというアイデアは1つの大きな銀行で発見されました-サイトには銀行カードの詳細を入力するフィールドがなく、仮想キーボードから番号を入力することが提案されており、電卓パネルの番号が再配置されています。 どのサイトでも似たようなことをしましょう=>ブラウザ拡張機能を作成しています！ ＃例として、Safariを使用します。
特に苦痛にならないように、ここから javascript / css用の既製の仮想キーボードを使用して 、少し変更します。
基本形
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Online Keyboard</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="container"> <textarea id="write" rows="6" cols="60"></textarea> <ul id="keyboard"> <li class="symbol"><span class="off">`</span><span class="on">~</span></li> <li class="symbol"><span class="off">1</span><span class="on">!</span></li> <li class="symbol"><span class="off">2</span><span class="on">@</span></li> <li class="symbol"><span class="off">3</span><span class="on">#</span></li> <li class="symbol"><span class="off">4</span><span class="on">$</span></li> <li class="symbol"><span class="off">5</span><span class="on">%</span></li> <li class="symbol"><span class="off">6</span><span class="on">^</span></li> <li class="symbol"><span class="off">7</span><span class="on">&</span></li> <li class="symbol"><span class="off">8</span><span class="on">*</span></li> <li class="symbol"><span class="off">9</span><span class="on">(</span></li> <li class="symbol"><span class="off">0</span><span class="on">)</span></li> <li class="symbol"><span class="off">-</span><span class="on">_</span></li> <li class="symbol"><span class="off">=</span><span class="on">+</span></li> <li class="delete lastitem">delete</li> <li class="tab">tab</li> <li class="letter">q</li> <li class="letter">w</li> <li class="letter">e</li> <li class="letter">r</li> <li class="letter">t</li> <li class="letter">y</li> <li class="letter">u</li> <li class="letter">i</li> <li class="letter">o</li> <li class="letter">p</li> <li class="symbol"><span class="off">[</span><span class="on">{</span></li> <li class="symbol"><span class="off">]</span><span class="on">}</span></li> <li class="symbol lastitem"><span class="off"></span><span class="on">|</span></li> <li class="capslock">caps lock</li> <li class="letter">a</li> <li class="letter">s</li> <li class="letter">d</li> <li class="letter">f</li> <li class="letter">g</li> <li class="letter">h</li> <li class="letter">j</li> <li class="letter">k</li> <li class="letter">l</li> <li class="symbol"><span class="off">;</span><span class="on">:</span></li> <li class="symbol"><span class="off">'</span><span class="on">"</span></li> <li class="return lastitem">return</li> <li class="left-shift">shift</li> <li class="letter">z</li> <li class="letter">x</li> <li class="letter">c</li> <li class="letter">v</li> <li class="letter">b</li> <li class="letter">n</li> <li class="letter">m</li> <li class="symbol"><span class="off">,</span><span class="on"><</span></li> <li class="symbol"><span class="off">.</span><span class="on">></span></li> <li class="symbol"><span class="off">/</span><span class="on">?</span></li> <li class="right-shift lastitem">shift</li> <li class="space lastitem"> </li> </ul> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/keyboard.js"></script> </body> </html>
スタイル
* { margin: 0; padding: 0; } body { font: 71%/1.5 Verdana, Sans-Serif; background: #eee; } #container { margin: 100px auto; width: 688px; } #write { margin: 0 0 5px; padding: 5px; width: 671px; height: 200px; font: 1em/1.5 Verdana, Sans-Serif; background: #fff; border: 1px solid #f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #keyboard { margin: 0; padding: 0; list-style: none; } #keyboard li { float: left; margin: 0 5px 5px 0; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #fff; border: 1px solid #f9f9f9; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .capslock, .tab, .left-shift { clear: left; } #keyboard .tab, #keyboard .delete { width: 70px; } #keyboard .capslock { width: 80px; } #keyboard .return { width: 77px; } #keyboard .left-shift { width: 95px; } #keyboard .right-shift { width: 109px; } .lastitem { margin-right: 0; } .uppercase { text-transform: uppercase; } #keyboard .space { clear: left; width: 681px; } .on { display: none; } #keyboard li:hover { position: relative; top: 1px; left: 1px; border-color: #e5e5e5; cursor: pointer; }
処理をクリックします
$(function(){ var $write = $('#write'), shift = false, capslock = false; $('#keyboard li').click(function(){ var $this = $(this), character = $this.html(); // If it's a lowercase letter, nothing happens to this variable // Shift keys if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { $('.letter').toggleClass('uppercase'); $('.symbol span').toggle(); shift = (shift === true) ? false : true; capslock = false; return false; } // Caps lock if ($this.hasClass('capslock')) { $('.letter').toggleClass('uppercase'); capslock = true; return false; } // Delete if ($this.hasClass('delete')) { var html = $write.html(); $write.html(html.substr(0, html.length - 1)); return false; } // Special characters if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); if ($this.hasClass('space')) character = ' '; if ($this.hasClass('tab')) character = " "; if ($this.hasClass('return')) character = " "; // Uppercase letter if ($this.hasClass('uppercase')) character = character.toUpperCase(); // Remove shift once a key is clicked. if (shift === true) { $('.symbol span').toggle(); if (capslock === false) $('.letter').toggleClass('uppercase'); shift = false; } // Add the character $write.html($write.html() + character); }); });
「メインフォーム」からわかるように、仮想キーボードは通常の構造化されたul-liリストであり、添付されたcssファイルによって仮想キーボードに変換され、jsスクリプトを使用してキーストロークを処理し、ボタンの対応する特性（可視性、大文字小文字など）を変更します。
まず、＃keycont依存関係を追加してスタイルを変更し、キーボードのスタイルを、それを使用するページのスタイルから次のように分離します。
#keycont { display: none; position: fixed !important; top: 50% !important; left: 50% !important; font: normal 14px/1.5 Verdana, Sans-Serif !important; color: #444 !important; text-shadow: none !important; background-color: #eee !important; padding: 5px 0 0 5px !important; margin: 0; -moz-border-radius: 5px !important; -webkit-border-radius: 5px !important; -webkit-user-select: none !important; z-index:999999999 !important; }
変更により、ページの上部、厳密に中央にキーボードを適切に表示する機会が与えられ、ボタンをスムーズにするためにクロスブラウザが追加されます。 他の変更は省略しますが、それほど重要ではありません。
次に、jsスクリプトを変更します。 ミキシングキーの機能を追加します。
Array.prototype.shuffle = function( b ) { var i = this.length, j, t; while( i ) { j = Math.floor( ( i-- ) * Math.random() ); t = b && typeof this[i].shuffle!=='undefined' ? this[i].shuffle() : this[i]; this[i] = this[j]; this[j] = t; } return this; };
彼女はキーボードのボタンの位置を変更します。 次のステップは、ミキシング用のボタンを追加することです。 簡単にするために、水平レイアウト内でキーをミックスします（完全にクリーンではありませんが、ニーズには十分です）。
//Constructing keyboard var keyboard = '<div id="keycont"><ul id="keyboard">'; var line0 = new Array('<li class="symbol"> <span class="off">`</span> <span class="on">~</span> </li>', '<li class="symbol"> <span class="off">1</span> <span class="on">!</span> </li>', '<li class="symbol"> <span class="off">2</span> <span class="on">@</span> </li>', '<li class="symbol"> <span class="off">3</span> <span class="on">#</span> </li>', '<li class="symbol"> <span class="off">4</span> <span class="on">$</span> </li>', '<li class="symbol"> <span class="off">5</span> <span class="on">%</span> </li>', '<li class="symbol"> <span class="off">6</span> <span class="on">^</span> </li>', '<li class="symbol"> <span class="off">7</span> <span class="on">&</span> </li>', '<li class="symbol"> <span class="off">8</span> <span class="on">*</span> </li>', '<li class="symbol"> <span class="off">9</span> <span class="on">(</span> </li>', '<li class="symbol"> <span class="off">0</span> <span class="on">)</span> </li>', '<li class="symbol"> <span class="off">-</span> <span class="on">_</span> </li>', '<li class="symbol"> <span class="off">=</span> <span class="on">+</span> </li>'); var line1 = new Array('<li class="letter">q</li>', '<li class="letter">w</li>', '<li class="letter">e</li>', '<li class="letter">r</li>', '<li class="letter">t</li>', '<li class="letter">y</li>', '<li class="letter">u</li>', '<li class="letter">i</li>', '<li class="letter">o</li>', '<li class="letter">p</li>', '<li class="symbol"> <span class="off">[</span> <span class="on">{</span> </li>', '<li class="symbol"> <span class="off">]</span> <span class="on">}</span> </li>', '<li class="symbol lastitem"> <span class="off">\</span> <span class="on">|</span> </li>'); var line2 = new Array('<li class="letter">a</li>', '<li class="letter">s</li>', '<li class="letter">d</li>', '<li class="letter">f</li>', '<li class="letter">g</li>', '<li class="letter">h</li>', '<li class="letter">j</li>', '<li class="letter">k</li>', '<li class="letter">l</li>', '<li class="symbol"> <span class="off">;</span> <span class="on">:</span> </li>', '<li class="symbol"> <span class="off">'</span> <span class="on">"</span> </li>'); var line3 = new Array('<li class="letter">z</li>', '<li class="letter">x</li>', '<li class="letter">c</li>', '<li class="letter">v</li>', '<li class="letter">b</li>', '<li class="letter">n</li>', '<li class="letter">m</li>', '<li class="symbol"> <span class="off">,</span> <span class="on"><</span> </li>', '<li class="symbol"> <span class="off">.</span> <span class="on">></span> </li>', '<li class="symbol"> <span class="off">/</span> <span class="on">?</span> </li>'); line0.shuffle(); line1.shuffle(); line2.shuffle(); line3.shuffle(); keyboard += line0.join(""); keyboard += '<li class="delete lastitem">delete</li>'; keyboard += '<li class="tab">tab</li>'; keyboard += line1.join(""); keyboard += '<li class="capslock">caps lock</li>'; keyboard += line2.join(""); keyboard += '<li class="return lastitem">return</li>'; keyboard += '<li class="left-shift">shift</li>'; keyboard += line3.join(""); keyboard += '<li class="right-shift lastitem">shift</li>'; keyboard += '<li class="space lastitem"> </li>'; keyboard+='</ul></div>'; $('body').append(keyboard);
キーボードが組み立てられました！
唯一残っているのは、キーボードがページに常に必要なわけではありませんが、「秘密」フィールドに何かを入力する場合のみです。ページにこれらのフィールドがいくつかある場合があります（このリリースでは、パスワード入力フィールドをキャッチします既知のプロパティ）。 そのため、キーボードをアクティブ化/非アクティブ化（非表示/表示）するための新しい関数をいくつか追加します。
$write.focus(function(){ $write = $(this); $keycont.fadeIn(); wrfocus = true; }); $write.focusout(function(){ if (focusss == false) {wrfocus=false; $keycont.fadeOut();} }); $keycont.hover( function(){ if (wrfocus == true) focusss = true; }, function(){ focusss = false; } ); $keycont.focusout(function(){ if (focusss == false) {wrfocus=false; $keycont.fadeOut();} }); $keycont.click(function(){ focusss = true; if (wrfocus == true) $write.focus(); });
もっと深くしなければ、それはすべて魔法です。
キーボードの機能：ブラウザー間の相対的な互換性、ページの再読み込み時のキーシャッフル（異なるタブではキーボードが個別にシャッフル）、javascriptを有効にする必要があり、暗黙の落とし穴がある可能性があります。
人気のある多くのリソースでテスト済み：
ハブラハブ用 
フェイスブック用 
VKの場合 
スタックオーバーフロー用 
残念ながら、GoogleとiCloudは機能しませんでした。おそらく、これらのリソースには特定のポイントがあります。
私は長い間キーボードを作ったので、あまりにも詳細でない説明をおaびします。
Safariの拡張アセンブリはこちらからダウンロードできます 。 これは、「開発者」タブからSafariにインストールおよびアクティブ化されます。これを行う方法は、お気に入りの検索エンジンで確認してください。
PSキーボードを好みに合わせてカスタマイズできます（銀行カードの入力フィールドやお気に入りのサイトの他の特定のフィールドをキャッチします）。コードの対応する行を削除することにより、ボタンのミキシングが無効になります。
私たちは健康、幸運を使います！