2012-07-19 24 views
4

我想保持键盘在iphone上显示,只要焦点从一个输入字段以编程方式移动到另一个输入字段。 当我第一次设置焦点时,代码工作正常,但后来未能如此。Html通过jQuery保持键盘上的iphone显示/ javascript

这是一段代码。任何想法如何保持键盘可见? 现场演示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> 
+4

“我想在iphone上显示键盘时,只要将焦点设置为输入字段”这不就是iPhone上的默认浏览器行为吗? – machineghost 2012-07-19 20:43:02

+0

是的,但请阅读完整的文章。当我通过编程将焦点移动到另一个输入框时,键盘隐藏。 – Naveen 2012-07-19 20:46:52

+0

Gotcha;这有点令人困惑,因为它听起来像你试图用代码复制默认行为。您可能想重新提出您的问题,使其更清楚地表明您正在尝试使用代码来解决有问题的浏览器行为(而不是尝试使用代码来首先显示键盘)。 – machineghost 2012-07-19 20:50:22

回答

0

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

我想剩下的唯一选择是将所有输入框的属性设置为只读,并单击它打开一个透明的输入框。然后从透明输入框中取值,并将其设置为我想要的任何只读输入框。

并随后不断地将透明输入框的位置更改为我为其设置值的只读输入框。

如果有人有这样做的更好的想法,我很乐意提供建议。

0

*编辑#2 *

它看起来像有没有办法解决这个问题(至少到目前为止)。

* END编辑#2 *

我认为当你“模糊”在Safari中的字段它隐藏了键盘,然后当你的“焦点”一个新的领域它显示的键盘。所以,除非你做了一些奇怪的事情(比如在聚焦新手势之后手动模糊旧领域),我真的不明白为什么你会有你描述的行为。

*编辑*

只是看着你的代码,并意识到你做的最后一件事是一个重点,这将促使键盘回升。但是,您正在进行手动模糊处理;我会尝试先删除它,看看它是否修复了一些问题。

* END编辑*

一个可行的办法来解决,虽然它是使用e.preventDefault()onBlur事件处理中。这应该防止隐藏键盘的浏览器默认行为。

+0

此代码复制了一些其他应用程序中需要的行为,我需要不断地将焦点移至其他输入框,因此我不能删除第一个焦点。我尝试了你的另一个解决方案,从我所了解的你提出的类似$('#kb')。onblur(e.preventDefault())的东西,但即使这样也行不通。 – Naveen 2012-07-19 21:16:07

+0

“所以我不能删除第一个焦点” - 这不是我认为的第一个焦点问题,而是模糊问题。至于尝试我的第二个想法,你很接近;尝试'$('#kb')。blur(function(e){e.preventDefault()})'。 – machineghost 2012-07-19 21:29:14

+0

我不需要模糊命令,最初我没有它,但只是尝试我把它放在那里。我尝试了你的第二个想法,但它仍然和模糊一样。 – Naveen 2012-07-19 21:35:14