没有为换码键触发键入事件

我有一个称为$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');

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

为什么在输入框被隐藏并重新显示之后,退出键不会触发按键事件?


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

然而,为了解决这个问题,我尝试使用focus()明确附加在.select() ,它工作正常。

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

演示。

链接地址: http://www.djcxy.com/p/68455.html

上一篇: keyup event not triggered for escape key

下一篇: Unable to change input value after typeahead selection