How to catch enter click using JEditable?

Question

Look at this piece of my code:

             $(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record", 
             {  
                event  : "mouseover",
                style  : "inherit",
                callback: function(value, settings) 
                {
                    //Some code
                }
             }

But I have some problems - this code works good for me, because it catches clicks by "enter" button. But now I need to change type of field to "textarea":

         $(".field").editable("http://"+document.location.host+"/index.php/welcome/update_record", 
         {  
            type : "textarea",
            event  : "mouseover",
            style  : "inherit",
            callback: function(value, settings) 
            {
                //Some code
            }
         }

And now it doesn't work - i.e. callback function has never executed. Please, tell me, I need to have textarea field and to catch event of pressing Enter.

score 1 · Answer 1 · edited May 23 '17 at 12:01

If you want to do the callback on pressing enter, you can do this:

http://jsfiddle.net/NRxLP/

$('#example').keyup(function(e) {
  if (e.which == 13) {
    $('#example').trigger('custom');
  } 
});

And then catch the 'custom' event for your handler in jEditable..

I wouldn't call this a best practice however, users are used to being able to use the enter button in a text area for adding multiple lines. Perhaps you could add a button as well - I believe jEditable has a way to automatically add a 'save' button..

In this question - jquery jeditable without OK and Cancel Buttons - they use the blur event which makes alot more sense to me..

score 0 · Answer 2 · answered Oct 06 '18 at 20:09

I would suggest checking for ctrl and shift keys as well, and preventing the default behaviour is there is one:

$(this).bind('keydown', function () {
                if (event.keyCode === 13 && !event.shiftKey && !event.ctrlKey) {
                    event.preventDefault();
                    $(this.form).submit(); // Or whatever
                    return false;
                } 
            })

How to catch enter click using JEditable?

2 Answers2