Javascript 虚拟键盘jquery在引导模式下显示不正确

我已经将jquery虚拟键盘用于引导模式框字段。我想在聚焦文本字段后，在模态框中的文本字段后显示键盘

JQuery代码是

$('#test').keyboard({ layout: 'qwerty', usePreview: false,position: {
        // null = attach to input/textarea;
        // use $(sel) to attach elsewhere
        of: $('#teste'),
        my: 'center top',
        at: 'center top',
        // used when "usePreview" is false
        at2: 'center bottom'
      } });

引导modalbox代码为：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Contact Information</h4>
  </div>
  <div class="modal-body">
        <div class="form-group">
            <label for="test" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-6">
              <input type="email" class="form-control" id="test" placeholder="test" autocomplete="off">
            </div>
        </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-success" id="save" >Send</button>
  </div>
</div></form>

&时代；
联系方式
电子邮件
接近
发送

这里是演示url 可能是位置是绝对的，所以不能正确显示键盘。

---

谢谢，

谢谢您询问堆栈溢出问题

抱歉没有评论，但我没有足够的声誉

我说不出来，因为这个JSFIDLE游乐场没有包括所有的引导布局，但是，它看起来像是动态定位的。这既是一个糟糕的解决方案，也是一个丑陋的解决方案

如果可能（我以前没有使用过jQuery虚拟键盘），我建议您遵循以下步骤：

• 在文本框上方或下方创建一个空的不可见div
• 在加载时，将JQuery键注入这个div
• 在文本框焦点上，使此div可见。在焦点上，使其不可见

---

希望这对您有所帮助

谢谢您询问堆栈溢出问题

抱歉没有评论，但我没有足够的声誉

我说不出来，因为这个JSFIDLE游乐场没有包括所有的引导布局，但是，它看起来像是动态定位的。这既是一个糟糕的解决方案，也是一个丑陋的解决方案

如果可能（我以前没有使用过jQuery虚拟键盘），我建议您遵循以下步骤：

• 在文本框上方或下方创建一个空的不可见div
• 在加载时，将JQuery键注入这个div
• 在文本框焦点上，使此div可见。在焦点上，使其不可见

---

希望这对您有所帮助

您的fiddle链接缺少jQuery ui，我建议您的项目中可能缺少这些，因为当我将它们添加到您的fiddle中时，它在更改初始化代码以删除位置变量后开始以正确的方式工作，看起来是这样的

 $('#test').keyboard({ layout: 'qwerty', usePreview: false});

希望这能解决你的问题

编辑1：

---

这是一个正在工作的fiddle:

您的fiddle链接缺少jQuery ui，我建议您在项目中可能缺少这些，因为当我将它们添加到您的fiddle中时，它在更改初始化代码以删除位置变量后开始以正确的方式工作，看起来是这样的

 $('#test').keyboard({ layout: 'qwerty', usePreview: false});

希望这能解决你的问题

编辑1：

---

这是一把正在使用的小提琴：

jquery虚拟键盘的内置问题。你能给我演示一下你的建议吗？因为我已经试过了，但没有效果。嗨@Bhumisaha，谢谢你的回复。我已经用我的帐户更新了你的JSFIDLE。然而，这是一个非常深入的选择，最初是预期的。但是，我现在已经设法解决了：）。请参阅jquery虚拟键盘的内置问题。你能给我演示一下你的建议吗？因为我已经试过了，但没有效果。嗨@Bhumisaha，谢谢你的回复。我已经用我的帐户更新了你的JSFIDLE。然而，这是一个非常深入的选择，最初是预期的。但是，我现在已经设法解决了：）。请看我的项目中包含了jQuery UI，我想在文本字段后显示键盘，但您的建议不起作用。您是否确保同时包含jQuery UI css和js文件？此外，由于您的小提琴非常简单，很难判断问题是否是由您自己的css、脚本文件或html布局的另一部分引起的。这是虚拟键盘位置问题，而不是jquery UI。您也可以查看虚拟键盘演示的问题。无论如何，更新了小提琴。请在我的编辑中查看小提琴，它显示了它的工作，因为您没有在小提琴中进行jQuery更改。谢谢，如果我使用transform:rotate（90度）旋转，请使用它。这是我的项目中包含的fiddle jQuery UI，我想在文本字段后显示键盘，但您的建议无效。您是否确保同时包含jQuery UI css和js文件？此外，由于您的小提琴非常简单，很难判断问题是否是由您自己的css、脚本文件或html布局的另一部分引起的。这是虚拟键盘位置问题，而不是jquery UI。您也可以查看虚拟键盘演示的问题。无论如何，更新了小提琴。请在我的编辑中查看小提琴，它显示了它的工作，因为您没有在小提琴中进行jQuery更改。谢谢，如果我使用transform:rotate（90度）旋转，请使用它。这是小提琴，它不起作用的原因是因为

$（'#teste'）

不存在（至少在JSFIDLE中是这样），所以位置被设置为0，0（左，上）-这里是使用

$（'#test'）

，或者干脆完全删除position选项，它应该像@jjs2000 shared一样工作。它不工作的原因是

$（'#teste'）

不存在（至少在JSFIDLE中是这样），所以position被设置为0，0（左，上）-这里是使用

$（'#test'）

，或者完全删除position选项，它应该像@jjs2000共享一样工作。