Question

我正在开发一个软件开发QA项目。我想像ex那样实现ex（ alt ）的关键样式结果。是否有任何插件可以解析文本并查找所有键，替换为关键图像/或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/

如何解析键盘字符并显示其图形等效字符？

1 个答案: