在关键事件之后关注文本框

Question

我想要实现的目标是：

• 在 Alt 上，它应显示span，告诉用户如果现在按下 c ，textbox将会在{{} 1}}
• 或者 Alt + c 它应该focus。 （这有效）

问题： 当按下 Alt 时显示focus，当 c 时，没有任何反应。但是，如果我在页面上的某处单击后按 c ，则会设置焦点。这是为什么？我该如何解决这个问题？

以下是我所拥有的。

span

var lastKey;
$(document).on("keydown", function(e) {
  e.stopPropagation();
  if (e.altKey) {
    $(".shortcut").fadeIn("slow");
    if (e.keyCode == 67) { // c
      console.log("filter should open");
      $(".shortcut").fadeOut("slow");
      $("#item").focus()
      e.preventDefault();
      return false;
    }

  }
  if (lastKey && e.keyCode == 67) { // c
    $(".shortcut").fadeOut("slow");
    $("#item").focus()
    e.preventDefault();
    lastKey = false;
    return false;
  }
  lastKey = true;
});

.shortcut {
  display: none;
}

.inputgroup-shortcut {
  position: absolute;
  //top: 25%;
  padding: 3px 5px;
  background: #428bca;
  border-radius: 4px;
  color: white;
  line-height: 1.0;
  font-size: 9px;
  font-weight: bold;
  left: 0px;
  z-index: 100;
}

Answer 1

您需要添加e.preventDefault()以防止alt键在浏览器中执行默认操作，即在浏览器中显示菜单栏.... 请参阅更新的代码段！

var lastKey;
$(document).on("keydown", function(e) {
  e.stopPropagation();
  if (e.altKey) {
    $(".shortcut").fadeIn("slow");
    e.preventDefault();
    if (e.keyCode == 67) { // c
      console.log("filter should open");
      $(".shortcut").fadeOut("slow");
      $("#item").focus()
      e.preventDefault();
      return false;
    }

  }
  if (lastKey && e.keyCode == 67) { // c
    $(".shortcut").fadeOut("slow");
    $("#item").focus()
    e.preventDefault();
    lastKey = false;
    return false;
  }
  lastKey = true;
});

.shortcut {
  display: none;
}

.inputgroup-shortcut {
  position: absolute;
  //top: 25%;
  padding: 3px 5px;
  background: #428bca;
  border-radius: 4px;
  color: white;
  line-height: 1.0;
  font-size: 9px;
  font-weight: bold;
  left: 0px;
  z-index: 100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="shortcut inputgroup-shortcut">c</span>
<input type="text" id="item" />