JQuery JEditable - How to Disable on click editing

Question

Hi all,

I was wondering if you can stop text being editable on click? I have a separate edit button to make the text editable and that's the only way that I want the user to be able to edit the text, so want to turn off the on click editing?

Any ideas?

Answer 1

Could you do something like this

var canEdit = false;

$('textarea#jeditable').focus(function(event) {
    if (canEdit) return true;
    event.preventDefault();
});

$('button#edit').click(function() {
    canEdit = true;

    $('textarea#jeditable').focus();
    canEdit = false;
});

Why exactly do you not want your users to be able to click to edit? I'd say this is expected behaviour and may confuse some users.

Answer 2

There's an undocumented option event that you can use when you create your jEditable fields.

(It's not actually undocumented but it's just mentioned off-hand in one sentence on the jEditable docs page.)

You can use it to change the event that makes the field editable. You can use any jquery event, even custom events.

For example, on my project I created an edit.mode event that makes the field editable which I can then trigger however I like, with a button, a hotkey, whatever.