I get a .focus() problem with JQUERY MOBILE

Question

I think that focus event doesn't work with JQuery mobile: here is my code. (when I delete the call to the library jquery mobile, it works)

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
    </head>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#acceuil').live('pagecreate', function(event) {
                $('#declencher').click(function() {
                    $('#cache').focus();
                });
                $('#declencher').trigger('click');
            });
        });
    </script>
    <body>
        <div data-role="page" id ="acceuil" >
            <div data-role="header" data-theme="a" ><h3>aaa</h3></div>
            <div data-role="content">
                <input id="cache" type="input">    
                <input type="button" id="declencher" value="declencher">
            </div><!-- content-->
            <div data-role="footer" data-theme="a" data-position="fixed"><h3> Footer </h3></div>
        </div>
    </body>

</html>

have you tried removing `$(document).ready()`? As suggested in the doco, you should bind events to `pagecreate` instead of `document.ready`. — William Niu, Aug 25 '11 at 14:40
thank u for writing, i think my question is clear man !!! i have removed $(document).ready() but it does'nt work, i think that focus() is not supported by jquery mobile — Wassim Sboui, Aug 25 '11 at 23:35
I didn't say your question wasn't clear. I said it wasn't presented cleanly (i.e. "clean" vs "clear"). I edited your question and tidied up your code, which you can inspect by looking at the editing history. — William Niu, Aug 26 '11 at 00:12
Does this post help: http://stackoverflow.com/questions/5889424/jquery-mobile-focus-next-input-on-keypress? — William Niu, Aug 26 '11 at 00:19

naugtur · Accepted Answer · 2012-02-01T21:59:42.980

10

pagecreate event fires before JQM does some changes to DOM so I suppose the focus is lost then.

Try switching to pageshow, especially because you want to get the focus everytime user gets to a page.

If it still doesn't work (there was such a case) wrap the code that triggers focus in a timeout (yes, it's a hack :) )

setTimeout(function(){
 $('#cache').focus();
},0);

This is a hack, but it does not depend on waiting a time interval. setTimeout() adds the function to rendering thread's queue (which is what runs javascript and page rendering in the browser) after the given time. So in this case the function is added instantly, so it runs after the current flow of javascript code finishes. So it's a way to make some code run right after the event handler ends. So this is not as hacky as one might think. I call it a hack, because it's using knowledge about how the browser works and it obscures the flow of code execution.

I recommend reading about how javascript execution and page drawing are handled by the same queue in a single thread. To anybody working with more than 20 lines of javascript.

I am quite sure that there is only one better solution - fix it in jQuery Mobile framework itself.

edited Feb 01 '12 at 21:59

answered Aug 31 '11 at 10:27

naugtur

16,827
5
70
113

i have been struggling to find a more elegant solution to this issue. This DOES work, but figure on different hardware this hack may be work inconstantly. I have tried the full gamut of jquery mobile built in events. The best i can achieve without this hack is to enable the "halo" (glow effect) on the field which is focused. The cursor is not displayed thou. Anyone have any other ideas? – mfalto Feb 01 '12 at 13:55
It might get broken in some future browsers, but it's highly unlikely. – naugtur Feb 01 '12 at 22:00
@SaurabhLP are you sure you tried using the `pageshow` event not just timeout? could you link to code? – naugtur May 13 '13 at 12:48
@SaurabhLP You are not using pageshow event. `setTimeout` part of my answer is just an additional precaution. Your problem is not at all related to this question. you have an input with an `id` and your selector is `.search`, that's all. – naugtur May 16 '13 at 09:26

score 2 · Answer 2 · answered Oct 25 '13 at 12:56

If you are using HTML5 then use autofocus attribute.

  <body>
    <div data-role="page" id ="acceuil" >
        <div data-role="header" data-theme="a" ><h3>aaa</h3></div>
        <div data-role="content">
            <input id="cache" type="input" autofocus>    
            <input type="button" id="declencher" value="declencher">
        </div><!-- content-->
        <div data-role="footer" data-theme="a" data-position="fixed"><h3> Footer       </h3></div>
    </div>
</body>

Please refer Autofocus attribute of HTML5

Orthocenter · Answer 3 · 2015-07-25T11:53:51.520

try this one, it 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();
            });

score 0 · Answer 4 · edited Jan 26 '17 at 15:27

0

On your UIWebView, set keyboardDisplayRequiresUserAction to NO.

If your using using Cordova or Phonegap, in your config.xml add the following:

<preference name="KeyboardDisplayRequiresUserAction" value="false"/>

edited Jan 26 '17 at 15:27

jmarkmurphy

11,030
31
59

answered Jan 26 '17 at 14:43

Joe Yates

1

score -1 · Answer 5 · answered Sep 29 '15 at 11:08

This is just another option and not the exact solution, this may serve the purpose in case if the above mentioned solutions do not work.

On clicking the Sales link, the focus will shift to sales-disclaimer, here in this case the offset is to be mentioned as per your requirement.

<div class="sales">
    <a href="#sales-disclaimer" onclick="setFocusToSales()">
        Sales
    </a>
</div>

<div id='sales-disclaimer'>
    some text here........
</div>

/Javascript function/

function setFocusToSales()
{
    $('html, body').animate({
        scrollTop: $('#sales-disclaimer').offset().top
    }, 1000);
}

score -1 · Answer 6 · edited May 09 '17 at 16:22

-1

solved

$( document ).on( "pageshow", "#casino", function( event ) {
    var txtBox=document.getElementById("SearchUsuario");
    txtBox.tabindex=0; //this do the trick
    txtBox.value="";
    txtBox.focus();
});

edited May 09 '17 at 16:22

Jose Rojas

3,490
3
26
40

answered Mar 08 '16 at 16:14

Pablo Cartes

1

I get a .focus() problem with JQUERY MOBILE

6 Answers6