javascript - 没有为转义键触发keyup事件

我有一个文本输入字段，称为$nameEditor。我想在按下按钮时显示此文本字段，并将其隐藏在blur上或在按下退出键时显示。

每次都将字段隐藏在blur上。

按下退出键时隐藏字段仅在第一次时有效。事件序列示例。

1）按下show文本输入字段的按钮。
2）按Escape键-文本输入字段hide s
3）再次按下show文本输入字段的按钮。
4）按Escape键-不触发键入事件
5）按其他任何键，将触发键入事件
6）按Escape键-文本输入字段hide s

相关标记：

<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">

相关脚本：

var $ renameButton = $（“＃renameButton”）;
var $ nameViewer = $（'＃assemblyNameView'）;
var $ nameEditor = $（'＃assemblyNameEditor'）;

函数cancelEdit（）{
  $ nameEditor.hide（）;
  $ nameViewer.show（）;
}

函数initEdit（）{
  $ nameViewer.hide（）;
  $ nameEditor.val（$ nameViewer.text（））。show（）。select（）;
}

函数commitEdit（newName）{
  // TODO：更新正在编辑的结构。
  $ nameEditor.hide（）;
  $ nameViewer.text（newName）;
  $ nameViewer.show（）;
}

$ renameButton.click（initEdit）;

$ nameEditor.blur（cancelEdit）;

$ nameEditor.keyup（function（e）{
  console.log（e）;

  如果（e.keyCode === 13）{
    var newName = val（）;

    如果（newName ===''）{
      alert（“未指定名称。”）;
      $ nameEditor.val（$ nameViewer.text（））。select（）;
      e.preventDefault（）;
      返回false；
    }

    commitEdit（newName）;
  }
  否则，如果（e.keyCode === 27）{
    cancelEdit（）;
  }
}）;


为什么在隐藏输入框然后重新显示后，转义键不触发keyup事件？

最佳答案

很难解释这里出了什么问题。当按钮和文本框都获得焦点时会有奇怪的效果吗？在标准的UI界面中是不可能的。实际上，当您键入除ESC，Enter，空格键以外的其他键时，...可能会在文本框中显示已键入的字符，然后只有文本框才能获得焦点。但是，如果您键入ESC，Enter，Space ...，则击键似乎会影响按钮，我什至可以看到按钮上存在某种颜色效果，表明该按钮当前处于聚焦状态。这看起来确实像个错误。

但是，要解决此问题，我尝试使用在focus()之后显式附加的.select()，它可以正常工作。

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

Demo.