How to change Angularjs xeditable text / textarea behavior?

Question

I am using angularjs and xeditable in my application. I would like to change the behavior of editable textarea and editable text to allow validation when the user clicks on it.
This will be better with an example:

<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()">{{item.label.text}}</span>

With this code, we cannot see the buttons for checking and deselecting our choice. Moroever the input key is not verified, so the user cannot verify its selection.
I want to change the behavior of the enter key to check for new text. And I want to add the ability for the user to change the text, and when he selects outsite textarea, the new text will be saved.

The problem is that I do not know how to do this, even after reading all the xeditable documentation, and I did not find a solution in any forum.

Do you have an idea how I can do this?

Thank you in advance

Answer 1

You can add an attribute blurwith a value submitand associate it with the attribute onbeforesave:

<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()" blur="submit" onbeforesave="validate($data)">{{item.label.text}}</span>

: http://jsfiddle.net/NfPcH/8269/