How to encapsulate JavaScript code as jQuery plugin or other solution

Question

I have a following piece of code on a few pages, and I'll need it on even more:

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

There're a few drawbacks of it:

the code doesn't imply what it does. What it does is: prevents form submittion when enter is hit on control with .editable-textbox class + control is blurred
of course code duplication

I just wonder: is there a way to refactor it to have something like this:

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

with jQuery.

alex · Accepted Answer · 2012-08-18 09:35:58Z

7

Yes.

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

You should give the Plugin Authoring Guide a read.

Also, it could be written much terser...

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

jsFiddle.

edited Aug 18, 2012 at 9:35

answered Aug 17, 2012 at 7:09

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

davids · Accepted Answer · 2012-08-17 07:09:46Z

-1

You've got a great resource in the jQuery Docs

answered Aug 17, 2012 at 7:09

davids

6,3713 gold badges33 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to encapsulate JavaScript code as jQuery plugin or other solution

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related