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

我有一个输入框，里面有一个图标，当点击它时，会显示一个虚拟键盘来显示重音字母。该代码工作得非常完美，除了每当点击图标（或虚拟键盘上的任何按钮）时，输入框就会失去焦点。以下是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>

这确实会在点击时恢复焦点；但是，在按住鼠标按钮的过程中，仍会出现短暂的焦点丢失。为了解决这个问题，我对HTML文件中的

kb图标

div使用了

onmousedown

事件，但仍然没有成功。我甚至试过这样的方法：

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

即使这样也没能奏效。为了更好地说明问题，有问题的输入框（#word）在不活动时设置为黄色背景，在使用时设置为白色。现在，假设您准备输入一些内容，并且光标位于输入框内。该框将为白色，因为它处于活动状态。这就是即使单击虚拟键盘图标，它也应保持不变的方式。但是，当您将鼠标指向虚拟键盘图标时，框变为黄色（如失焦时），然后在松开鼠标时变为白色（对焦）。知道哪里出了问题吗

---

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

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

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

toggler=函数（id，elclass）{
document.getElementById（“word”）.focus（）；
$（“#”+id）.toggleClass（'keypad-hidden'）；
$（elclass）.toggleClass（“显示的键盘”）；
}

这对解决当前问题没有任何作用。感谢您建议对整个代码进行更正，但我在这里关心的是在

kb图标上的
mousedown
事件期间保持对输入框（
lookup field
）元素的关注。正如我在问题中所说，“在按住鼠标按钮期间，仍然会有短暂的焦点丢失。”同样的情况也发生在你的小提琴上。在键盘图标上鼠标向下移动的整个过程中，inputbox始终不对焦。只有松开鼠标按钮，焦点才会返回。@sandeps:谢谢你的拨弄。问题依然存在。为了了解我在说什么，只需单击键盘图标并继续按住而不释放鼠标。您会注意到，在整个
mousedown
过程中，焦点远离输入框。这就是我想要阻止的。即使在
mousedown
事件期间，我也需要将焦点放在盒子上。虚拟键盘上的按键也是如此。当单个特殊字符键处于
mousedown
事件中时，焦点不应离开输入框。我认为用户不会长时间按住按键或mousedown事件。我觉得你们想通过离合器和刹车一起推动汽车前进。
<script type="text/javascript">
toggler = function (id, elclass) {
  document.getElementById("word").focus();
  $("#" + id).toggleClass('keypad-hidden');
  $(elclass).toggleClass('keypad-shown');
}
</script>