Jquery Content Editable

by Avinashullal

HTML

<span class="editSpan">New Interview 03-14-13-11:40</span>

<br/>
<br/>
<input type="button" value="Save" class="btn btn-green" width="100px" height="25px" />

CSS

[contenteditable]:hover:after {
        content:' Double click to edit';
        font-style: italic;
        font-size: 12px;
        font-family: sans-serif;
        color: #ccc;
        .text-stroke(0);
    }
    [contenteditable]:hover, [contenteditable]:focus {
        background: #FFFFD3;
    }
    [contenteditable]:focus {
        padding: 5px;
    }
    [contenteditable]:focus:after {
        content:'';
    }
    /*-----------------------------------*/
    /* Buttons */
    /*-----------------------------------*/
    .btn, .entry .btn {
        display:inline-block;
        text-decoration:none;
        text-align:center;
        color:#fff;
        font-size:14px;
        font-family:'Open Sans', sans-serif;
        font-weight:400;
        padding: 10px 25px;
        border-radius: 5px;
        line-height: 20px;
        margin: 5px 0;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
        white-space:nowrap;
    }
    input.btn {
        width:auto !important;
        display:inline-block;
        padding:0 23px;
        *padding: 0 11px;
        text-align:center;
        height:43px;
        cursor:pointer;
        font-size:15px;
        font-family:'Open Sans', sans-serif;
        font-weight: 400;
        color:#fff;
        margin:0 !important;
    }
    .btn-green {
        background: #6ec78b;
        background: -moz-linear-gradient(top, #6ec78b 0%, #5cbc79 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6ec78b), color-stop(100%, #5cbc79));
        background: -webkit-linear-gradient(top, #6ec78b 0%, #5cbc79 100%);
        background: -o-linear-gradient(top, #6ec78b 0%, #5cbc79 100%);
        background: -ms-linear-gradient(top, #6ec78b 0%, #5cbc79 100%);
        background: linear-gradient(to bottom, #6ec78b 0%, #5cbc79 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6ec78b',...

JavaScript

var txt;
        $(function () {
            $('.editSpan').hover(function () {
                $(this).attr('contentEditable', true);
            }).blur(

            function () {
                $(this).attr('contentEditable', false);
                txt = $(this).html();
            });

            $('.btn').click(function () {
                alert(txt);
            });
        });