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

Posted 2023-02-25

【中文标题】虚拟键盘 jquery 在引导模式中显示不正确

【英文标题】：virtual keyboard jquery incorrect display in bootstrap modal

【发布时间】：2016-03-31 12:10:11

【问题描述】：

我已将 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 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>

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

【问题讨论】：

它不起作用的原因是因为$('#teste') 不存在（至少在 jsfiddle 中），所以位置设置为 0、0（左、上） - 这里是 @ 987654322@ 使用 $('#test') 代替，或者只是完全删除位置选项，它应该像 @jjs2000 共享一样工作。

【参考方案1】：

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

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

希望这能解决您的问题

编辑 1：

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

【讨论】：

jQuery UI 包含在我的项目中，我想在文本字段后显示键盘，但您的建议不起作用。

您确定包含 jQuery-ui css 和 js 文件了吗？另外，由于您的小提琴非常简单，因此很难判断问题是由您自己的 css、脚本文件或 html 布局的另一部分引起的

存在虚拟键盘位置问题而不是 jquery UI。你也可以检查虚拟键盘演示是否有问题。无论如何，更新小提琴。

请查看我的编辑中显示的小提琴，因为您没有在小提琴中进行 jQuery 更改

谢谢，如果我用变换旋转：旋转（90度）。这是小提琴jsfiddle.net/88zg4n3e/2

【参考方案2】：

感谢您在 Stack Overflow 上提问。

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

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

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

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

希望对你有帮助

【讨论】：

jquery 虚拟键盘存在内置问题。你能给我演示一下你的建议吗？因为我已经尝试过了但没有工作。

嗨@BhumiShah，感谢您的回复。我已经分叉了你的 JSFiddle 并在我的帐户上更新了它。然而，这是一个最初预期的更深入的选择。但是，我现在设法修复它:)。请看here