转义键未触发Keyup事件

keyup event not triggered for escape key

本文关键字：Keyup 事件转义更新时间：2023-09-26

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

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

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

按show为文本输入框的按钮。
按转义键-文本输入域hide s
再次按下show为文本输入域的按钮。
按escape键-未触发keyup事件
按任意键触发keyup事件
按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()),告诉().select ();}函数commitEdit(newName) {//更新正在编辑的结构。美元nameEditor.hide ();美元nameViewer.text(新名称);美元nameViewer.show ();}美元renameButton.click (initEdit);美元nameEditor.blur (cancelEdit);美元nameEditor.keyup(函数(e) {console.log (e);if (e.keyCode === 13) {var newName = val();if (newName === ") {alert("未指定名称");(nameEditor.val美元nameViewer.text ()) .select ();e.preventDefault ();返回错误;}commitEdit(新名称);}if (e.keyCode === 27) {cancelEdit ();}}）;之前

为什么escape键在输入框被隐藏然后重新显示后不触发keyup事件?

很难解释这里出了什么问题。有一个奇怪的效果，当按钮和文本框接收焦点?这在标准的UI界面中是不可能的。事实上，当您键入除ESC， Enter， Space和更多的键时…输入的字符在文本框中显示为OK，之后只有文本框接收焦点。但是，如果您键入ESC， 输入， 空格…按键似乎影响了按钮，我甚至可以看到按钮上有一些颜色效果，显示它当前是聚焦的。这看起来确实像一个bug。

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

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

转义键未触发Keyup事件

keyup event not triggered for escape key

演示。