虚拟键盘jquery在引导模式中显示错误

virtual keyboard jquery incorrect display in bootstrap modal

本文关键字：模式 显示 错误 键盘 jquery 虚拟      更新时间：2023-10-04

我已经将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'
      } });

引导模式框代码为：

<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>

这是演示urlhttp://jsfiddle.net/5Lww1wgm/3/可能是位置是绝对的，所以它不能正确显示键盘。谢谢，

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

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

希望这能解决你的问题

编辑1:

这是一把正在工作的小提琴：http://jsfiddle.net/jjr2000/88zg4n3e/1/

感谢您询问Stack Overflow。

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

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

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

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

希望这能帮助

相关文章：