Geek Answers Handbook

Html keeps keyboard visible on iphone via jquery / javascript

I want to keep the keyboard visible on the iphone whenever the focus moves from one input field to another programmatically. The code works fine when I set focus for the first time, but I can't do it afterwards.

Here is a snippet of code. Any idea how to keep the keyboard visible? live demo http://navtest.0fees.net/del/ , open it on iphone or 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
source share
2 answers

I think that the iPhone was designed in such a way as to launch the keyboard only through some kind of user action. That’s why, by manually pressing the button, you can move the focus to the input field and open the keyboard, but any other attempt to programmatically press the button and set the focus on the input field from the “event handler” button to open the keyboard will not work.

I assume that the only option I stay with is to set the attribute of all my input fields for reading and click it, opening a transparent input field only on top of it. Then take the value from the transparent input field and set it no matter which input core is input only.

And subsequently continue to reposition the transparent input field to any readonly input field. I set the value for.

If anyone has a better idea of ​​this, I am open to suggestions.

0
source

* EDIT # 2 *

There seems to be no solution to this question (at least not yet).

* END EDIT # 2 *

I think when you “blur” a field in Safari, it hides the keyboard, and then when you “focus” a new field, it shows the keyboard. So, if you are not doing something strange (for example, manually blurring the old field after focusing the new one), I honestly don’t understand why you would have the behavior that you are describing.

* EDIT *

Just looked at your code and realized that the last thing you do is focus, which should return the keyboard. However, you do manual blur; First I will try to remove this and see if it fixes something.

* END EDIT *

One possible solution to solve it is to use e.preventDefault() from within the onBlur event onBlur . This should prevent the default behavior of the browser from hiding the keyboard.

0
source

More articles:


All Articles