CODEWITHSUNDEEP
javascriptjqueryiphoneios5jquery-mobile
Naveen
Naveen

Reputation: 303

Html keep keyboard visible on iphone through jquery/javascript

I want to keep the keyboard visible on iphone whenever focus is moved from one input field to another programmatically. The code works fine when I set focus for the first time but fails to do so subsequently.

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>

Upvotes: 4

Views: 3941

Answers (2)

Naveen
Naveen

Reputation: 303

I think iPhone has been designed in such a way to trigger keyboard only through some user action. That is why through manual click on the button it is possible to moved the focus to input box and open keyboard, but any other attempt to programmatically click a button and from button's event handler set focus to input box to open keyboard won't work.

I guess the only option I am left with is to set attribute of all my input boxes to readonly and on clicking it open a transparent input box just on top of it. Then take the value from the transparent input box and set it whichever readonly input box I want.

And subsequently keep changing the position of transparent input box to whichever readonly input box I am setting value for.

If anyone has a better idea of doing it, I am open for suggestions.

Upvotes: 0

machineghost
machineghost

Reputation: 35725

* EDIT #2 *

It looks like there is no solution to this question (so far at least).

* 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, unless you're doing something strange (like manually blurring the old field after focusing the new one) I honestly don't understand why you'd have the behavior you describe.

* EDIT *

Just looked at your code and realized that the last thing you do is a focus, which should bring the keyboard back up. However, you are doing a manual blur; I'd try removing that first and see if it fixes things.

* END EDIT *

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

Upvotes: 1

Related Questions