javascript - 转义键未触发 keyup 事件

Question

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

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

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

1. 按下显示文本输入字段的按钮。
2. 按转义键 - 文本输入字段隐藏s
3. 再次按下显示文本输入字段的按钮。
4. 按 Esc 键 - 未触发 keyup 事件
5. 按任何其他键都会触发 keyup 事件
6. 按 escape - 文本输入字段隐藏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');
    
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();
  }
});

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

Answer 1

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

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

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

Demo.