Question

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

每次都隐藏blur上的字段。

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

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

相关脚本：

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();
  }
});

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

Answer 1

这里很难解释什么是错的。当按钮和文本框都获得焦点时会产生奇怪的效果？在标准UI界面中这是不可能的。实际上当你键入除 ESC ， Enter ， Space 以外的其他键以及更多......键入的字符在文本框中显示为OK之后只有文本框才能获得焦点。但是，如果你输入 ESC ，输入，空格 ...按键似乎会影响按钮，我甚至可以看到有一些颜色对按钮的影响显示它当前正在聚焦。这看起来确实是一个错误。

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

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

未触发转义键的事件键事件

1 个答案:

Demo.