Click me to edit, I am long text and autogrow
<h2 class="editable" data-connect-with="title" data-max-length="50" data-input-type="input">
Click me to edit
</h2>
<p class="editable" data-connect-with="username" data-max-length="50">
Click me to edit, I am long text and autogrow
</p>
$(document).ready(function() {
$('.editable').inlineEdit();
});
<input type="hidden" id="defaultTextTarget" name="someHiddenField" />
<div id="defaultText">
This is default text
.....................
Welcome to your life
There's no turning back
Even while we sleep
We will find you
Acting on your best behaviour
Turn your back on mother nature
Everybody wants to rule the world
</div>
<div id="limitText">
This editor is limit text, click me to edit
</div>
$('#limitText').inlineEdit({
showCounter: true,
maxLength: 100,
defaultText: true,
inputType: 'input'
});
$('#defaultText').inlineEdit({
defaultText: true,
connectWith: '#defaultTextTarget',
onFocus: function (val) {
console.log("You are inside me LOL!");
console.log(val);
},
onUpdate: function (val) {
console.log("You almost done");
console.log(val);
}
});
//Default options
var options = {
//Function on update hidden field
onUpdate: function () {
},
//Function on focus to ediable element
onFocus: function () {
},
//Function call on key down on input field
onKeyDown: function () {
},
//Css class when hover on editable item
hoverClass: 'hover',
//Show or hide counter in case set max length
showCounter: false,
//Input type, textarea or input type text
inputType: 'textarea',
//Maxth length of this input
maxLength: false
};