CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Lahiruzz
Lahiruzz

Reputation: 665

Jquery mobile autofocus does not work

I need add autofocus for my mobile site for That I have used 

`<script type="text/javascript" >
        $(document).ready(function() {
            $("#div_error").focus();
        });



</script >`

but this does not work. what is the reason for that?

<div  id="div_error" tabindex="-1">some text</div>

Upvotes: 0

Views: 1159

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Document ready can't be used in this manner with jQuery Mobile.

While it will trigger it will trigger before jQuery Mobile can create and style active page. To counter this correct jQuery Mobile page event must be used. If you don't know what page jQuery Mobile events are then take a look at my ARTICLE.

Working example: http://jsfiddle.net/D9NBT/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <div  id="div_error" tabindex="-1">some text</div>
            </div>
        </div>    
    </body>
</html>

Javascript:

$(document).on('pageshow', '#index', function(){ 
    $("#div_error").focus();
});

Upvotes: 1

Related Questions