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

【问题标题】：How can I parse for keyboard characters and display their graphical equivalent?如何解析键盘字符并显示它们的图形等效项？
【发布时间】：2012-07-22 12:51:36
【问题描述】：

我正在从事一个软件开发质量保证项目。我想像 SO 那样实现 ex( alt ) 的关键样式结果。是否有任何插件可以解析文本并找到所有键，用关键图像/或css3替换？

有什么建议吗？提前致谢

【问题讨论】：

在你的css中添加这个.. kbd { /*styles在这里*/ }
那么你想要一段“如果我不能进入大学，我的生命将会结束”。转换成“如果我不能进入 a大学，我的生命将结束。”？

标签： javascript jquery css keyboard-shortcuts

【解决方案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/

【讨论】：