我认为焦点事件不适用于JQuery mobile:这是我的代码。 (当我删除对库jquery mobile的调用时,它可以工作)
<!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>
pagecreate
事件在JQM对DOM进行一些更改之前触发,因此我认为焦点随后丢失了。
[尝试切换到pageshow
,尤其是因为您希望每次用户进入页面时都获得焦点。
如果仍然不起作用(在这种情况下,请包装触发超时焦点的代码(是的,这是hack:))]
setTimeout(function(){
$('#cache').focus();
},0);
这是一个hack,但它不依赖于等待时间间隔。 setTimeout()
在给定时间后将函数添加到渲染线程的队列(在浏览器中运行javascript和页面渲染的队列)。因此,在这种情况下,该函数会立即添加,因此它将在当前的javascript代码流完成后运行。因此,这是一种使事件处理程序结束后立即运行一些代码的方法。因此,这并不像人们想象的那样棘手。我称其为hack,因为它使用的是有关浏览器工作原理的知识,并且它掩盖了代码执行的流程。
我建议阅读有关如何在单个线程中的同一队列中处理javascript执行和页面绘制的信息。对于使用超过20行javascript的任何人。
我非常确定,只有一个更好的解决方案-在jQuery Mobile框架中对其进行修复。
如果您使用的是HTML5然后使用自动对焦属性。
<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>
尝试一下,它可以在我的移动Safari,Chrome和桌面浏览器上使用
// 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();
});
在您的UIWebView上,将keyboardDisplayRequiresUserAction设置为NO。
如果使用的是Cordova或Phonegap,请在config.xml中添加以下内容:
<preference name="KeyboardDisplayRequiresUserAction" value="false"/>
这只是另一种选择,而不是确切的解决方案,如果上述解决方案不起作用,则可以达到目的。
单击“销售”链接后,重点将转移到“免责声明”,在这种情况下,偏移量将根据您的要求进行提及。
<div class="sales">
<a href="#sales-disclaimer" onclick="setFocusToSales()">
Sales
</a>
</div>
<div id='sales-disclaimer'>
some text here........
</div>
/ Javascript函数 /
function setFocusToSales()
{
$('html, body').animate({
scrollTop: $('#sales-disclaimer').offset().top
}, 1000);
}
已解决
$( document ).on( "pageshow", "#casino", function( event ) {
var txtBox=document.getElementById("SearchUsuario");
txtBox.tabindex=0; //this do the trick
txtBox.value="";
txtBox.focus();
});