javascript - 虚拟键盘jquery在 Bootstrap 模式中显示不正确

Question

我已使用 jquery 虚拟键盘作为 Bootstrap 模式框字段。我想在焦点位于文本字段后在模式框中的文本字段后面显示键盘。

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>

这是演示网址http://jsfiddle.net/5Lww1wgm/3/可能位置是绝对的，因此无法正确显示键盘。谢谢，

Answer 1

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

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

希望这能解决您的问题

编辑1:

这是一个工作 fiddle :http://jsfiddle.net/jjr2000/88zg4n3e/1/