jQuery InlineEdit Plugin Examples

    <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);
        }
    });