javascript - 如何解析键盘字符并显示它们的图形等效项？

Question

我正在从事软件开发质量检查项目。我想像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/