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クラス+コントロールがぼやけているコントロールでEnterキーが押されたときにフォームの送信を防ぎます
• もちろんコードの重複

私はただ疑問に思っています：それをリファクタリングして次のようなものにする方法はありますか：

$('.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;
        });
};

Plugin Authoring Guideを読んでください。

また、もっと簡潔に書くこともできます...

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

jsFiddle .

Answer 2

jQueryドキュメントには優れたリソースがあります