JQUERY MOBILE 出现 .focus() 问题答案

【问题标题】：I get a .focus() problem with JQUERY MOBILEJQUERY MOBILE 出现 .focus() 问题
【发布时间】：2011-11-02 23:50:08
【问题描述】：

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

【问题讨论】：

更干净的问题通常会得到更快的回答......
你试过删除$(document).ready()吗？按照文档中的建议，您应该将事件绑定到 pagecreate 而不是 document.ready。
谢谢你的写作，我想我的问题很清楚！我已删除 $(document).ready() 但它不起作用，我认为 jquery mobile 不支持 focus()
我没有说你的问题不清楚。我说它没有干净地呈现（即“干净”与“清晰”）。我编辑了您的问题并整理了您的代码，您可以通过查看编辑历史来检查。
这篇文章有帮助吗：stackoverflow.com/questions/5889424/…?

标签： jquery jquery-ui jquery-plugins jquery-selectors jquery-mobile

【解决方案1】：

pagecreate 事件在 JQM 对 DOM 进行一些更改之前触发，所以我想那时焦点会丢失。

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

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

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

这是一个 hack，但它不依赖于等待时间间隔。 setTimeout() 在给定时间后将函数添加到渲染线程的队列（这是在浏览器中运行 javascript 和页面渲染的内容）。因此，在这种情况下，该函数会立即添加，因此它会在当前 javascript 代码流完成后运行。所以这是一种让一些代码在事件处理程序结束后立即运行的方法。所以这并不像人们想象的那么骇人听闻。我称其为 hack，因为它使用了有关浏览器如何工作的知识，并且它掩盖了代码执行的流程。

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

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

【讨论】：

我一直在努力寻找更优雅的解决方案来解决这个问题。这确实有效，但在不同的硬件上，这种黑客可能会反复无常地工作。我已经尝试了 jquery mobile 内置事件的全部范围。如果没有这个技巧，我能做到的最好的事情就是在被聚焦的领域启用“光环”（发光效果）。光标不显示。有人有其他想法吗？
它可能会在未来的某些浏览器中损坏，但可能性极小。
@SaurabhLP 您确定您尝试使用pageshow 事件而不仅仅是超时吗？你能链接到代码吗？
@SaurabhLP 您没有使用 pageshow 事件。 setTimeout 我的部分回答只是一个额外的预防措施。您的问题与此问题完全无关。您有一个带有id 的输入，而您的选择器是.search，仅此而已。

【解决方案2】：

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

请参考Autofocus attribute of HTML5

【讨论】：

【解决方案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();
            });

【讨论】：

【解决方案4】：

这只是另一种选择，并不是确切的解决方案，如果上述解决方案不起作用，这可能会起到作用。

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

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

【讨论】：

【解决方案5】：

解决了

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

【讨论】：

【解决方案6】：

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

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

<preference name="KeyboardDisplayRequiresUserAction" value="false"/>

【讨论】：