Menu
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>
333
The reason that's not working is simply because it's not stealing focus from the dev console. If you run the following code in your console and then quickly click in your browser window after, you will see it focus the search box: setTimeout(function() { $('input[name="q"]'). focus() }, 3000);
The team announced that the cross-platform jQuery Mobile project under its umbrella is fully deprecated as of October 7, 2021. New technologies for mobile app development have evolved since this project was launched in 2010, so we're encouraging developers to plan for this jQuery Mobile transition.
It isn't just for mobile, it's 'mobile-first', NOT 'mobile-only' so it can be used as a base for responsive web design. All those great touch-friendly form inputs and widgets are fully themeable and work great no matter what the device (mobile or desktop).
focus() method may not fail directly, as the method still exists. However, the expected behavior will not occur. This method is deprecated.
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.
153
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
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
