单击虚拟键盘图标时保持对输入框的关注

Question

我有一个输入框，里面有一个图标，单击该图标会显示一个用于重音字母的虚拟键盘。该代码运行完美，只是每当单击图标（或虚拟键盘上的任何按钮）时，输入框都会失去焦点。这是 HTML：

<div class="input-group col-md-4 col-md-offset-4">
          <input id="word" type="textbox" placeholder="Enter your word here..." class="form-control input-lg lookup-field lookup-field-single" onMouseOver="$(this).focus();" required>
          <span class="fa fa-keyboard-o fa-2x kb-icon" onclick="toggler('virtualkeypad', this);"></span>
          <span class="input-group-btn"><button class="btn btn-lg btn-primary lookup-submit" type="button" id="lookup"  onclick="lookup()">Lookup</button></span>
        </div>

        <div id="virtualkeypad" class="btn-group keypad-hidden col-md-offset-4">
          <button class="btn btn-lg first-btn" type="button" onClick="spl_character('á');">á</button>
          <button class="btn btn-lg" type="button" onClick="spl_character('é');">é</button>
          <button class="btn btn-lg" type="button" onClick="spl_character('í');">í</button>
          <button class="btn btn-lg" type="button" onClick="spl_character('ó');">ó</button>
          <button class="btn btn-lg" type="button" onClick="spl_character('ú');">ú</button>
          <button class="btn btn-lg" type="button" onClick="spl_character('ü');">ü</button>
          <button class="btn btn-lg last-btn" type="button" onClick="spl_character('ñ');">ñ</button>
        </div>

我尝试在 JS 中添加代码以重新获得焦点 (document.getElementById("word").focus();)，如下所示：

toggler = function (eid, eclass) {
  document.getElementById("word").focus();
  $("#" + eid).toggleClass('keypad-hidden');
  $(eclass).toggleClass('keypad-shown');
}

这确实会在点击时重新获得焦点；但是，在鼠标按钮保持按下期间，仍然会出现短暂的失焦。为了解决这个问题，我对 HTML 文件中的 kb-icon div 使用了 onmousedown 事件，但仍然没有运气。我什至尝试过这样的事情：

$('.kb-icon').addEventListener("mousedown", function(){
 document.getElementById("word").focus();
});

即使这样也没有用。为了更好地说明问题，有问题的输入框（#word）在不活动时设置为黄色背景，在使用时设置为白色。现在假设您已准备好输入内容，并且光标位于输入框内。该框将是白色的，因为它处于活动状态。即使单击虚拟键盘图标，它也应该保持这种状态。但是，当您将鼠标指向虚拟键盘图标时，框会变成黄色（就像失焦时一样），然后在释放鼠标的那一刻又变回白色（焦点）。知道可能出了什么问题吗？

Answer 1

函数切换器中的参数类是保留标识符。此外，不建议对不同元素使用相同的 id，在您的情况下，按钮会重复“id=key”..

请参阅下面的更新代码，它将焦点设置到输入

<script type="text/javascript">
toggler = function (id, elclass) {
  document.getElementById("word").focus();
  $("#" + id).toggleClass('keypad-hidden');
  $(elclass).toggleClass('keypad-shown');
}
</script>