Editable on click

A label that becomes an input control on click.

by johan polson

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
 <h4>Editable labels (below)</h4>

<label class="pull-left">Click me and enter some text</label>
<input class="clickedit" type="text" />
<div class="clearfix"></div>


lol
<label class="pull-left">Some other thing</label>
<input class="clickedit" type="text" />
<!--<div class="clearfix"></div>-->

CSS

label:hover {
    background: #f2f5ff;
    border-radius:5px;
    padding:2px 4px;
}

JavaScript

var defaultText = 'Click me and enter some text';

function endEdit(e) {
    var input = $(e.target),
        label = input && input.prev();

    label.text(input.val() === '' ? defaultText : input.val());
    input.hide();
    label.show();
}

$('.clickedit').hide()
.focusout(endEdit)
.keyup(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        endEdit(e);
        return false;
    } else {
        return true;
    }
})
.prev().click(function () {
    $(this).hide();
    $(this).next().val($(this).text()); 
    $(this).next().show().focus();
});