Show them the default, and allow them to press escape or Ctrl-Z

Question

I have a table cell, and when the user clicks on it, I replace the contents of the table cell with an input tag with the current contents as the default. But I don't like it's behavior because there's a chance that the user can delete the contexts on the input simply by clicking on it a second time.

 $('.LastName').live('click', function() {
  var myText = $(this).text();
  $(this).empty().append('<input name="LastName" id="LastName" value="' + myText + '" />');
  document.myForm.LastName.focus();
 });

Q: How do I give the user a default, plus allow them to press the escape key or Ctrl-Z while in the middle of an edit?

Answer 1

You can check if your input is currently beign displayed and do not display it for the second time if it is.

var lock = false;
$('.LastName').live('click', function() {
    if (!lock) {
        // set the lock
        lock = true;

        // your handler code goes here
    }
});

$('.lastName input').live('blur', function() {
    // release the lock
    lock = false;
});

As for handling Ctrl-Z one of the key event handlers (keypress, keydown or keyup) is what you are looking for.