javascriptjqueryjquery-eventsjeditable

How to add event listeners to jEditable input?


How do I add an event listener to a jEditable input?

By default the ENTER key is used to submit, but I need to have other keys as well to submit value?

 $('.editable').editable(function(value, settings) { 
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, { 
     width: "100%"
     onblur: 'submit'
 });

Solution

  • You could add a keypress event listener to the document to listen for those additional keys being pressed.

    jEditable adds a form with a class of editable to the page whenever you start to edit something. Using .on() to register the event listener will make sure the handler gets fired even when the form block is added to the page dynamically.

    Here's a working example.

    This just shows how you can determine when "space" or "#" are pressed. You'll have to modify the code to work for you.

    <form class="editable">
      <input type="text" class="editable" />
    </form>​
    
    $(document).ready(function() {
        $('form.editable').on('keypress', function(e) {
            if (e.keyCode === 32 || e.keyCode === 35) alert('Time to submit!');
        });
    });​