转义键未触发 keyup 事件

Question

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

隐藏blur 上的字段每次都有效。

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

1) 按下shows 文本输入字段的按钮。 2) 按转义 - 文本输入字段hides 3) 再次按下shows 文本输入字段的按钮。 4）按escape - 不触发keyup事件 5) 按下任何其他键并触发 keyup 事件 6）按escape - 文本输入字段hides

相关标记：

<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'); 功能取消编辑（）{ $nameEditor.hide(); $nameViewer.show(); } 函数初始化编辑（）{ $nameViewer.hide(); $nameEditor.val($nameViewer.text()).show().select(); } 功能提交编辑（新名称）{ // TODO: 更新正在编辑的结构。 $nameEditor.hide(); $nameViewer.text(newName); $nameViewer.show(); } $renameButton.click(initEdit); $nameEditor.blur(cancelEdit); $nameEditor.keyup（函数（e）{ 控制台.log(e); 如果（e.keyCode === 13）{ var newName = val(); 如果（新名称 === ''）{ alert("未指定名称。"); $nameEditor.val($nameViewer.text()).select(); e.preventDefault(); 返回假； } 提交编辑（新名称）； } 否则如果（e.keyCode === 27）{ 取消编辑（）； } });

为什么输入框隐藏后重新显示后escape键没有触发keyup事件？

Answer 1

很难解释这里出了什么问题。当按钮和文本框都获得焦点时有一个奇怪的效果？在标准的 UI 界面中是不可能的。实际上，当您键入 ESC、Enter、Space 等其他键时，键入的字符会在文本框中显示为 OK，并且之后只有文本框获得焦点。但是，如果您键入 ESC、Enter、Space... 击键似乎会影响按钮，我什至可以看到有一些颜色按钮上的效果显示它当前处于焦点状态。这看起来确实是一个错误。

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

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

Demo.