CODEWITHSUNDEEP
javascripthtmljquerycssjquery-events
Mike Nitchie
Mike Nitchie

Reputation: 1174

keyup event not triggered for escape key

I have a text input field referred to as $nameEditor. I want to show this text field when a button is pressed, and hide it on blur or when the escape key is pressed.

Hiding the field on blur works every time.

Hiding the field when pressing the escape key works only the first time. Example sequence of events.

  1. Press the button that shows the text input field.
  2. Press escape - text input field hides
  3. Press the button that shows the text input field again.
  4. Press escape - the keyup event is not triggered
  5. Press any other key and the keyup event is triggered
  6. Press escape - the text input field hides

Relevant markup:

<button id="renameButton" title="Rename" data-icon="ui-icon-pencil">Rename</button>
<span id="assemblyNameView">Assembly Name</span>
<input id="assemblyNameEditor" style="display:none" class="ui-corner-all widget">

Relevant script:

var $renameButton = $("#renameButton");
var $nameViewer = $('#assemblyNameView');
var $nameEditor = $('#assemblyNameEditor');
    
function cancelEdit() {
  $nameEditor.hide();
  $nameViewer.show();
}
    
function initEdit() {
  $nameViewer.hide();
  $nameEditor.val($nameViewer.text()).show().select();
}
    
function commitEdit(newName) {
  // TODO: Update the structure being edited.
  $nameEditor.hide();
  $nameViewer.text(newName);
  $nameViewer.show();
}
    
$renameButton.click(initEdit);
    
$nameEditor.blur(cancelEdit);
    
$nameEditor.keyup(function(e) {
  console.log(e);
  
  if (e.keyCode === 13) {
    var newName = val();
    
    if (newName === '') {
      alert("No name specified.");
      $nameEditor.val($nameViewer.text()).select();
      e.preventDefault();
      return false;
    }
    
    commitEdit(newName);
  }
  else if (e.keyCode === 27) {
    cancelEdit();
  }
});

Why is the escape key not triggering the keyup event after the input box has been hidden then re-shown?

Upvotes: 1

Views: 2635

Answers (1)

King King
King King

Reputation: 63317

It's hard to explain what's wrong here. There is a strange effect when both the button and the textbox receive focus? It's impossible in a standard UI interface. In fact when you type keys other than ESC, Enter, Space and maybe more ... the typed characters are shown OK in the textbox and only the textbox receives focus after that. However if you type ESC, Enter, Space... the keystrokes seem to affect on the button and I can even see there is some color effect on the button showing that it's currently focused. This looks like a bug indeed.

However to solve this, I tried using focus() explicitly appended after .select() and it works OK.

function initEdit() {
  $nameViewer.hide();
  $nameEditor.val($nameViewer.text()).show().select().focus();
}

Demo.

Upvotes: 1

Related Questions