javascript - キーボード文字を解析し、それに対応するグラフィックを表示するにはどうすればよいですか?

Question

私はソフトウェア開発の QA プロジェクトに取り組んでいます。altSO のように ex( ) の主要なスタイリング結果を達成したいと思います。テキストを解析してすべてのキーを見つけ、キー画像/またはcss3に置き換えるプラグインはありますか?

助言がありますか？前もって感謝します

Answer 1

これを行うプラグインは知りませんが、独自のプラグインを簡単に作成できます。kbd次のプラグインは、Alvin Wong の例と同じようにタグを追加します。これは非常に単純なアプローチであり、不要なマークアップが発生する可能性があることに注意してください。

(function($){
    // List of keys
    var keys = ["ctrl", "alt", "esc", "del", "end", "num"];

    $.fn.keys = function(){
        this.each(function(){
            // Split text into words and remove line breaks
            var text = $(this).html().replace(/(\r\n|\n|\r)/gm, "").split(" ");

            // Compare every word to every key
            for (var i = 0; i < text.length; ++i) {
                for (j in keys) {
                    if (text[i].toLowerCase() == keys[j]) {
                        text[i] = "<kbd>" + text[i] + "</kbd>";
                        break;
                    }
                }
            }

            $(this).html(text.join(" "));
        });
    };
})(jQuery);

その後、CSS スタイルシートに任意のスタイルを追加できます。インスピレーションについては、SOのスタイルシートを参照してください... ;)
http://cdn.sstatic.net/stackoverflow/all.css

kbd {
    /* ... */
}

ここでテストしてください: http://jsfiddle.net/BUxpt/