Html通过jquery/javascript在iphone上保持键盘可见

Html keep keyboard visible on iphone through jquery/javascript

本文关键字：键盘 iphone jquery 通过 javascript Html      更新时间：2023-12-25

每当焦点以编程方式从一个输入字段移动到另一个输入域时，我都希望在iphone上保持键盘可见。当我第一次设置焦点时，代码工作得很好，但后来没有这样做。

这是一段代码。知道如何保持键盘可见吗？现场演示http://navtest.0fees.net/del/，在iphone或ipad上打开。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
body{background-color: #efefef;}
input:focus{ color:red; font-size:30px; background: rgba(0,0,0,0.2); }
.button {
  font-family: Arial; color: #ffffff; font-size: 35px; padding: 10px;
  text-decoration: none; -webkit-border-radius: 28px; -moz-border-radius: 28px;
  -webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666;
  text-shadow: 1px 1px 3px #666666; border: solid #005157 2px;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#c3f7f4), to(#095461));
  background: -moz-linear-gradient(top, #c3f7f4, #095461);
}
.button:hover { background: #19ad02; }
</style>
    <head>
        <title>I Pad</title>
        <script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
    </head>
    <body>
        <button type="button" name="" id="name" value="" class="button">Submit</button>
        <input type="text" id="kb" value="" class="button"/>
        <input type="text" id="kb1" value="" class="button"/>
        <script type="text/javascript">
                $('#name').click(function(){            
                    $('#kb').focus();
                    $('#kb').blur(); //not important
                    $('#kb1').focus();
                });
        </script>
    </body>
</html>

*编辑#2*

这个问题似乎没有解决方案（至少到目前为止）

*结束编辑#2*

我认为当你在Safari中"模糊"一个字段时，它会隐藏键盘，然后当你"聚焦"一个新字段时，会显示键盘。所以，除非你在做一些奇怪的事情（比如在聚焦新的领域后手动模糊旧的领域），否则我真的不明白你为什么会有你描述的行为。

*编辑*

刚看了你的代码，就意识到你做的最后一件事是聚焦，这应该会让键盘重新启动。但是，您正在进行手动模糊；我会先把它去掉，看看它是否能解决问题

*结束编辑*

解决此问题的一种可能的解决方案是在onBlur事件处理程序内部使用e.preventDefault()。这应该可以防止浏览器默认的隐藏键盘的行为。

我认为iPhone的设计方式是只通过一些用户操作来触发键盘。这就是为什么通过手动点击按钮可以将焦点移动到输入框并打开键盘，但任何其他尝试以编程方式点击按钮并从按钮的事件处理程序将焦点设置为输入框以打开键盘的方式都是无效的。

我想我剩下的唯一选项是将所有输入框的属性设置为只读，然后单击它打开它上面的透明输入框。然后从透明输入框中获取值，并将其设置为我想要的只读输入框。

然后继续将透明输入框的位置更改为我正在设置值的只读输入框。

如果有人对此有更好的想法，我愿意接受建议。

相关文章：