Add Hotkeys to Wordpress Part 1

一直很喜欢 Confluence 的键盘操作，按 C 创建页面，按 E 编辑页面，今天山寨一个到Wordpress，只要坚持写代码，就会有很多意外的收获。

查找元素

推荐的查找子元素的方法：
HTML结构：

<li id="wp-admin-bar-edit">
    <a class="ab-item" href="http://chenzixin.com/wp-admin/post.php?post=3532&amp;action=edit">Edit Post</a>
</li>

var editBtn = jQuery("#wp-admin-bar-edit").find(".ab-item");

此时找到的 editBtn 已经是 a 标签：

typeof(editBtn); //"object"
editBtn.text(); //"Edit Post"
editBtn.attr("class"); //"ab-item"
editBtn.attr("href"); //"http://chenzixin.com/wp-admin/post.php?post=3532&action=edit"

jQuery 点击事件

但是，

editBtn.click();

并不能跳转，以下是解决办法：
转为DOM对象：

//jQuery对象是一个数据对象，通过[index]方法获取相应的DOM对象
editBtn[0].click();
//jQuery本身提供，通过.get(index)方法获取相应的DOM对象
editBtn.get(0).click();

附：
对DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了：

var v = document.getElementById("wp-admin-bar-new-content");
// undefined
v.find("a")
// TypeError: undefined is not a function
jQuery(v).find("a")
// 正常输出

进阶测试：

<a id="alink" href="abc.php">下一步</a>

jQuery("#alink").click(); // 触发了a标签的点击事件，但没触发页面跳转
document.getElementById("alink").click(); // 既触发了a标签的点击事件，又触发了页面跳转

变通方法：

<a id="alink" href="abc.php"><span id="spanId">下一步</span></a>

jQuery("#spanId").click()；//可以触发页面跳转

绑定键盘事件

早年做前端开发的时候，用过 jquery.hotkeys 插件，jQuery 作者开发，可惜多年不再维护，不知是否已经集成到 jQuery 中了，于是查找官方API，直接定义相关的事件：

• keyup
• keydown
• keypress

KeyCode 参考：MDN KeyboardEvent.keyCode
在线测试：这里

组合键

• event.shiftKey
• event.ctrlKey
• event.altKey
• event.metaKey

禁用保存：

jQuery(document).keydown(function (event) {
            // If Control or Command key is pressed and the S key is pressed
            // run save function. 83 is the key code for S.
            if ((event.ctrlKey || event.metaKey) && event.which == 83) {
                // Save Function
                event.preventDefault();
                alert("No Saving!");
                return false;
            }
        }
);

---

完整代码，贻笑大方，class-wp-admin-bar.php 第 368 行起：

jQuery(function(){
    var editBtn = jQuery("#wp-admin-bar-edit").find(".ab-item");
    var viewBtn = jQuery("#wp-admin-bar-view");//暂不考虑……
    var editUrl = editBtn.attr("href");
    if(editUrl === undefined){
        jQuery(document).keyup(function( event ) {
            // 按 c 添加新文章
            var atHome = window.location.href == "http://chenzixin.com/";
            var onSearch = jQuery(".search-field").is(":focus") || jQuery(".adminbar-input").is(":focus");
            if ( event.which == 67 && atHome && !onSearch) {
                window.location = "http://chenzixin.com/wp-admin/post-new.php";
            }
        });
    }else{
        jQuery(document).keyup(function( event ) {
            var onSearch = jQuery(".search-field").is(":focus") || jQuery(".adminbar-input").is(":focus");
            // 按 e 启动编辑功能
            if ( event.which == 69 && !onSearch) {
                window.location = editUrl;
            }
            // 按 h 返回首页
            if (event.which == 72 && !onSearch){
                window.location = "http://chenzixin.com/";
            }
        });
    }
});

后续修正，直接修改：htdocs/static/js/christen/hotkeys.js。