Html 通过 jquery/javascript 保持键盘在 iphone 上可见
Posted
技术标签:
【中文标题】Html 通过 jquery/javascript 保持键盘在 iphone 上可见【英文标题】：Html keep keyboard visible on iphone through jquery/javascript 【发布时间】：2012-07-19 02:48:14 【问题描述】：每当焦点以编程方式从一个输入字段移动到另一个输入字段时，我想保持键盘在 iphone 上可见。 当我第一次设置焦点时，代码运行良好，但随后未能这样做。
这是一个sn-p的代码。知道如何保持键盘可见吗？ 现场演示http://navtest.0fees.net/del/，在iphone或ipad上打开。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
bodybackground-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>
【问题讨论】：
“当焦点设置到输入字段时，我想在 iPhone 上显示键盘”这不只是 iPhone 上的默认浏览器行为吗？ 是的，但请阅读完整的帖子。当我以编程方式将焦点移到另一个输入框时，键盘会隐藏。 明白了；这有点令人困惑，因为听起来您正在尝试使用代码复制默认行为。您可能需要重新表述您的问题，以更清楚地表明您正在尝试使用代码来解决有问题的浏览器行为（而不是首先尝试使用代码来显示键盘）。 我已经复制了这个问题：jsfiddle.net/Jvc63/1 访问jsfiddle.net/Jvc63 看看它是否有效 抱歉.. 这不起作用尝试在 ipad 或 iphone 中打开 jsfiddle.net/Jvc63/1。一旦焦点移到第二个文本框，键盘就会隐藏。 【参考方案1】：* 编辑 #2 *
看起来这个问题没有解决方案（至少到目前为止）。
* 结束编辑 #2 *
我认为，当您在 Safari 中“模糊”一个字段时，它会隐藏键盘，然后当您“聚焦”一个新字段时，它会显示键盘。所以，除非你在做一些奇怪的事情（比如在聚焦新领域后手动模糊旧领域），否则我真的不明白你为什么会有你描述的行为。
* 编辑 *
刚刚查看了您的代码并意识到您做的最后一件事是焦点，它应该使键盘恢复正常。但是，您正在进行手动模糊；我会先尝试删除它，看看它是否能解决问题。
* 结束编辑 *
一个可能的解决方案是在onBlur 事件处理程序中使用e.preventDefault()。这应该可以防止隐藏键盘的浏览器默认行为。
【讨论】：
这段代码复制了我在其他一些应用程序中需要的行为，我经常需要以编程方式将焦点移到其他输入框，因此我无法移除第一个焦点。我尝试了您的其他解决方案，据我了解，您提出了类似 $('#kb').onblur(e.preventDefault()) 的建议，但即使这样也不起作用。 “所以我不能删除第一个焦点” - （我认为）问题不是第一个焦点，而是模糊。至于尝试我的第二个想法，你很接近；试试$('#kb').blur(function(e) e.preventDefault())。
我不需要 blur 命令，最初我没有，只是为了尝试一下，我把它放在那里。我尝试了您的第二个想法，但无论是否模糊，它仍然相同。
射击。另一个想法：尝试在focus 之后调用click，所以$('#kb1').focus().click();
我之前也试过了，但是没用。 :( 我什至尝试在第一个模糊和第二个焦点之间设置一些延迟，但键盘仍然隐藏。【参考方案2】：
我认为 iPhone 的设计方式是仅通过某些用户操作来触发键盘。这就是为什么通过手动单击按钮可以将焦点移动到输入框并打开键盘，但是任何其他以编程方式单击按钮并从按钮的事件处理程序设置焦点到输入框以打开键盘的尝试都不起作用。
我想我剩下的唯一选择是将所有输入框的属性设置为只读，然后单击它会在其顶部打开一个透明输入框。然后从透明输入框中取值，并设置为我想要的任何只读输入框。
随后不断将透明输入框的位置更改为我为其设置值的只读输入框。
如果有人对此有更好的想法，我愿意提供建议。
【讨论】：
以上是关于Html 通过 jquery/javascript 保持键盘在 iphone 上可见的主要内容，如果未能解决你的问题，请参考以下文章
通过 jQuery/Javascript 添加悬停 CSS 属性
html JQuery Javascript HTML Boilerplate