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 show s the text input field. 2) Press escape - text input field hide s 3) Press the button that show s 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 hide s

Relevent 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?

---

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.

链接地址: http://www.djcxy.com/p/68456.html

上一篇: 输入不像它应该滚动到最右边

下一篇: 没有为换码键触发键入事件