javascript - 如何将 JavaScript 代码封装为 jQuery 插件或其他解决方案

Question

我在几页上有一段代码，我需要更多：

        $('.editable-textbox').live('keypress', function(e) {
            if (e.keyCode == 13) {
                $(this).blur();
                return false;
            }
            return true;
        }).live('keyup', function(e) {
            if (e.keyCode == 13) {
                $(this).blur();
                return false;
            }
            return true;
        });

它有几个缺点：

• 该代码并不暗示它的作用。它的作用是：当输入被击中时阻止表单提交，.editable-textbox类+控制模糊
• 当然代码重复

我只是想知道：有没有办法将它重构为这样的东西：

$('.editable-textbox').supressFormSubmitOnEnter();

用 jQuery。

Answer 1

是的。

$.fn.supressFormSubmitOnEnter = function() {
    return this.live('keypress', function(e) {
            if (e.keyCode == 13) {
                $(this).blur();
                return false;
            }
            return true;
        }).live('keyup', function(e) {
            if (e.keyCode == 13) {
                $(this).blur();
                return false;
            }
            return true;
        });
};

您应该阅读插件创作指南。

而且，它可以写得更简洁......

$.fn.supressFormSubmitOnEnter = function() {
    return $(document).on('keypress keyup', this, function(e) {
            if (e.keyCode == 13) {
                $(this).blur();
                e.preventDefault();
            }
        });
};

js小提琴。

Answer 2

你在jQuery Docs中有很好的资源