Question

我认为焦点事件不适用于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>

Answer 1

在JQM对DOM进行一些更改之前，

pagecreate事件触发，因此我认为焦点会丢失。

尝试切换到pageshow，尤其是因为您希望每次用户访问某个页面时都能获得焦点。

如果它仍然不起作用（有这种情况）包装在超时时触发焦点的代码（是的，这是一个黑客:)）

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

这是一个黑客，但它不依赖于等待时间间隔。 setTimeout()在给定时间之后添加了渲染线程队列的功能（这是在浏览器中运行javascript和页面呈现的功能）。所以在这种情况下，函数会立即添加，因此它会在当前的javascript代码流完成后运行。因此，这是一种在事件处理程序结束后使某些代码正常运行的方法。所以这并不像人们想象的那么愚蠢。我称之为黑客攻击，因为它使用的是浏览器如何工作的知识，它掩盖了代码执行的流程。

我建议阅读有关如何在单个线程中由同一队列处理javascript执行和页面绘制的内容。任何使用超过20行javascript的人。

我很确定只有一个更好的解决方案 - 在jQuery Mobile框架中修复它。

Answer 2

如果您使用的是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>

请参阅Autofocus attribute of HTML5

Answer 3

尝试这个，它适用于我的移动版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();
            });

Answer 4

在您的UIWebView上，将keyboardDisplayRequiresUserAction设置为NO。

如果您使用Cordova或Phonegap，请在config.xml中添加以下内容：

master = []
@template.stacks.alphabetised.each_with_index do |stack, i|
  master << { stack: stack.name, id: stack.id }
  stack.boxes.indexed.each_with_index do |box, j|
    master[i] = { box: box.name, id: box.id }
    box.template_variables.indexed.each do |var|
      master[i][j] = { var: var.name, id: var.id }
    end
  end
end
master

Answer 5

这只是另一种选择，而不是确切的解决方案，如果上述解决方案不起作用，这可能有助于实现目的。

单击“销售”链接时，焦点将转移到销售免责声明，在这种情况下，将根据您的要求提及偏移量。

<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);
}

Answer 6

解决

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

JQUERY MOBILE的.focus（）问题？

6 个答案: