虚拟键盘 jquery 在 bootstrap 模态中显示不正确

Question

我为 bootstrap 模态框字段使用了 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'
      } });

Bootstrap 模态框代码为：

<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 http://jsfiddle.net/5Lww1wgm/3/ 可能位置是绝对的，所以它不能正确显示键盘。谢谢，

Answer 1

感谢您在 Stack Overflow 上提问。

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

我不知道，因为这个 jsfiddle playground 不包括您的所有 bootstrap 布局，但是，它看起来像是动态定位的。这是一个既糟糕又丑陋的解决方案。

如果可以的话（我之前没有用过jQuery虚拟键盘），我建议您按照以下步骤操作：

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

希望对您有所帮助

Answer 2

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

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

希望这能解决您的问题

编辑 1：

这是一个有效的 fiddle：http://jsfiddle.net/jjr2000/88zg4n3e/1/

虚拟键盘 jquery 在 bootstrap 模态中显示不正确

virtual keyboard jquery incorrect display in bootstrap modal

javascript

jquery

virtual-keyboard

twitter-bootstrap