单击虚拟键盘图标时，将注意力集中在输入框上

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

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

即使这样也失败了。为了更好地说明问题，有问题的输入框（#word）在非活动状态时设置为黄色背景，在使用时为白色。现在说你准备好输入东西了，光标在输入框内。该盒子因为处于活动状态而呈白色。即使您单击虚拟键盘图标，也应该保持这种状态。但是，当鼠标指向虚拟键盘图标，然后在释放鼠标时变回白色（焦点对准）时，盒子变为黄色（如焦点不对准时）。任何想法可能会出错？

Answer 1

在功能toggler参数类是保留标识符。此外它的不建议使用不同的元素相同的id，你的情况“ID =键”重复按钮..

见下更新的代码将焦点设置到输入

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