JQUERY MOBILE 出现 .focus() 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7179098/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
I get a .focus() problem with JQUERY MOBILE
提问by Wassim Sboui
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)
我认为焦点事件不适用于 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>
采纳答案by naugtur
pagecreateevent fires before JQM does some changes to DOM so I suppose the focus is lost then.
pagecreate事件在 JQM 对 DOM 进行一些更改之前触发，所以我想焦点会丢失。
Try switching to pageshow, especially because you want to get the focus everytime user gets to a page.
尝试切换到pageshow，特别是因为您希望每次用户访问页面时都获得焦点。
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.
这是一个 hack，但它不依赖于等待时间间隔。setTimeout()在给定时间后将该函数添加到渲染线程的队列（即在浏览器中运行 javascript 和页面渲染的队列）。因此，在这种情况下，该函数会立即添加，因此它会在当前 javascript 代码流完成后运行。所以这是一种在事件处理程序结束后立即运行一些代码的方法。所以这并不像人们想象的那么笨拙。我称其为 hack，因为它使用了有关浏览器如何工作的知识，并且它掩盖了代码执行流程。
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.
我建议阅读有关 javascript 执行和页面绘制如何在单个线程中由同一队列处理的内容。对于使用 20 多行 javascript 的任何人。
I am quite sure that there is only one better solution - fix it in jQuery Mobile framework itself.
我很确定只有一种更好的解决方案 - 在 jQuery Mobile 框架本身中修复它。
回答by Shoaib Chikate
If you are using HTML5 then use autofocus attribute.
如果您使用的是 HTML5，则使用 autofocus 属性。
<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
回答by Orthocenter
try this one, it works on my mobile Safari, Chrome and also desktop browser
试试这个，它适用于我的移动 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();
});
回答by Joe Yates
On your UIWebView, set keyboardDisplayRequiresUserAction to NO.
在您的 UIWebView 上，将 keyboardDisplayRequiresUserAction 设置为 NO。
If your using using Cordova or Phonegap, in your config.xml add the following:
如果您使用 Cordova 或 Phonegap，请在您的 config.xml 添加以下内容：
<preference name="KeyboardDisplayRequiresUserAction" value="false"/>
回答by Poonam.JD
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/
/ Javascript 函数/
function setFocusToSales()
{
$('html, body').animate({
scrollTop: $('#sales-disclaimer').offset().top
}, 1000);
}
回答by Pablo Cartes
solved
解决了
$( document ).on( "pageshow", "#casino", function( event ) {
var txtBox=document.getElementById("SearchUsuario");
txtBox.tabindex=0; //this do the trick
txtBox.value="";
txtBox.focus();
});
