单击虚拟键盘图标时，将焦点保持在输入框上

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文件中针对onmousedown div使用了kb-icon事件，但仍然没有运气。我甚至试过这样的事情：

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

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

Answer 1

函数转换器中的参数类是保留标识符。同样不建议在不同的元素中使用相同的id，在你的情况下＆＃34; id = key＆＃34;重复按钮..

请参阅以下更新的代码，该代码将焦点设置为输入

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