iOS does not show keyboard on .focus() #3016

Closed
offsky opened this Issue Nov 10, 2011 · 15 comments

Comments

Projects
None yet
@offsky

offsky commented Nov 10, 2011

When I call .focus() on one of my text inputs or textareas, the iPhone keyboard does not automatically appear.

http://jsfiddle.net/kzUuG/1/

Tested on iPhone 4 running iOS5. This may be a jquery issue instead of jquerymobile, Im not sure. But, it would be nice if there was some workaround either way.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 11, 2011

As far as I know it isn't possible to show the iOS keyboard via javascript. You can focus an element, Safari will draw a blue "focused" border, but it won't raise the keyboard.

I'd be eager to learn a workaround if there's one.

ghost commented Nov 11, 2011

As far as I know it isn't possible to show the iOS keyboard via javascript. You can focus an element, Safari will draw a blue "focused" border, but it won't raise the keyboard.

I'd be eager to learn a workaround if there's one.

@eddiemonge

This comment has been minimized.

Show comment
Hide comment
@eddiemonge

eddiemonge Nov 11, 2011

Contributor

iOS won't, as far as I can tell from testing, show the keyboard without some kind of user interaction.

Trying a setTimeout to load it doesnt work. But setting the focus on another element's onClick event brings it up.

http://jsbin.com/inunis/8

I believe this should be closed as an invalid bug.

Contributor

eddiemonge commented Nov 11, 2011

iOS won't, as far as I can tell from testing, show the keyboard without some kind of user interaction.

Trying a setTimeout to load it doesnt work. But setting the focus on another element's onClick event brings it up.

http://jsbin.com/inunis/8

I believe this should be closed as an invalid bug.

@Wilto

This comment has been minimized.

Show comment
Hide comment
@Wilto

Wilto Nov 11, 2011

Contributor

Yeah, unfortunately, I’m third-ing this one: I’ve yet to find a way to trigger the iOS keyboard on focus.

Contributor

Wilto commented Nov 11, 2011

Yeah, unfortunately, I’m third-ing this one: I’ve yet to find a way to trigger the iOS keyboard on focus.

@Wilto Wilto closed this Nov 11, 2011

@chrisrowe

This comment has been minimized.

Show comment
Hide comment
@chrisrowe

chrisrowe Jul 23, 2015

This now appears to be working under the button click. (iOS9 beta4)

This now appears to be working under the button click. (iOS9 beta4)

@Orthocenter

This comment has been minimized.

Show comment
Hide comment
@Orthocenter

Orthocenter Jul 24, 2015

following code works on my mobile Safari, Chrome and also desktop browser

// div is some selected element
                var f = function(event) {
                    $timeout(function() { // angular way, setTimeout is OK
                        input[0].focus();
                        event.preventDefault();
                    })
                };
                var mobile = false;
                div.on('click', function(event) {
                    if(mobile) return;
                    f(event);
                });

                div.on('touchstart', function(event) {
                    mobile = true;
                    f(event);
                });

                div.on('touchend', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                });

following code works on my mobile Safari, Chrome and also desktop browser

// div is some selected element
                var f = function(event) {
                    $timeout(function() { // angular way, setTimeout is OK
                        input[0].focus();
                        event.preventDefault();
                    })
                };
                var mobile = false;
                div.on('click', function(event) {
                    if(mobile) return;
                    f(event);
                });

                div.on('touchstart', function(event) {
                    mobile = true;
                    f(event);
                });

                div.on('touchend', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                });

@slorber slorber referenced this issue in JedWatson/react-tappable Jul 29, 2015

Closed

event argument is not provided to onTap consistently #39

@jaykyburz

This comment has been minimized.

Show comment
Hide comment
@jaykyburz

jaykyburz Oct 2, 2016

Guys, I have the opposite problem on my page right now. Every time I build the UI on my single page app the UI shows. There are not text input boxes at all!

Nothing do to with this project, I just came across this discussion when searching for answers.

Guys, I have the opposite problem on my page right now. Every time I build the UI on my single page app the UI shows. There are not text input boxes at all!

Nothing do to with this project, I just came across this discussion when searching for answers.

@ivegotwings

This comment has been minimized.

Show comment
Hide comment
@ivegotwings

ivegotwings Mar 16, 2017

Why was this closed? The problem still exists at 10.1.1.

Why was this closed? The problem still exists at 10.1.1.

@atakanaydin

This comment has been minimized.

Show comment
Hide comment
@atakanaydin

atakanaydin May 18, 2017

+1 any fix ?

+1 any fix ?

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz May 18, 2017

Member

.focus is a core jquery method not jquery mobile so we wont be making any changes to focus within mobile

Member

arschmitz commented May 18, 2017

.focus is a core jquery method not jquery mobile so we wont be making any changes to focus within mobile

@webuxr

This comment has been minimized.

Show comment
Hide comment
@webuxr

webuxr Sep 13, 2017

Any chance someone has a link to this issue in jQuery's issue queue? I'm going to do my Google fu on this but thought a reference link would be quite helpful here.

If I find anything, I'll try to circle-back and post my finidings.

Please note: I found this issue because I'm looking for a solution to pop the iOS keyboard on :focus of my search input (type=search).

webuxr commented Sep 13, 2017

Any chance someone has a link to this issue in jQuery's issue queue? I'm going to do my Google fu on this but thought a reference link would be quite helpful here.

If I find anything, I'll try to circle-back and post my finidings.

Please note: I found this issue because I'm looking for a solution to pop the iOS keyboard on :focus of my search input (type=search).

@xgz123

This comment has been minimized.

Show comment
Hide comment
@xgz123

xgz123 Jan 28, 2018

@Orthocenter he is totally right

xgz123 commented Jan 28, 2018

@Orthocenter he is totally right

@mailsonlp

This comment has been minimized.

Show comment
Hide comment
@mailsonlp

mailsonlp Feb 9, 2018

This has being worked for me.

$(".mobile-search").click(function(){ $("input[name='term']").trigger('focus') });

mailsonlp commented Feb 9, 2018

This has being worked for me.

$(".mobile-search").click(function(){ $("input[name='term']").trigger('focus') });

@bankurukodanda

This comment has been minimized.

Show comment
Hide comment
@bankurukodanda

bankurukodanda Feb 13, 2018

I tried it's not working for me on page load I directly placed with out any event
$("input[name='term']").trigger('focus')
can anyone help me

I tried it's not working for me on page load I directly placed with out any event
$("input[name='term']").trigger('focus')
can anyone help me

@emilium

This comment has been minimized.

Show comment
Hide comment
@emilium

emilium Apr 4, 2018

Safari accepts the focus event when it is inside a touch event handler.
$(document).on('touchstart', 'element', function(){ input.focus(); }

emilium commented Apr 4, 2018

Safari accepts the focus event when it is inside a touch event handler.
$(document).on('touchstart', 'element', function(){ input.focus(); }

@stajne

This comment has been minimized.

Show comment
Hide comment
@stajne

stajne Apr 23, 2018

But how to do it on load?

stajne commented Apr 23, 2018

But how to do it on load?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment