jquery - 我在使用 JQUERY MOBILE 时遇到 .focus() 问题

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

我认为焦点事件不适用于 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,尤其是因为您希望在用户每次访问页面时都获得焦点。

如果它仍然不起作用(有这样的情况),请将触发焦点的代码包装在超时中(是的,这是一个黑客:))

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

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

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

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

关于jquery - 我在使用 JQUERY MOBILE 时遇到 .focus() 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7179098/

相关文章:

使用鼠标选择日期时,JQuery UI Datepicker 失去焦点

javascript - “打开全部”嵌套 jQuery Accordion

javascript - jQuery:自动执行插件?

javascript - 如何使用 document.execCommand 更改字体大小?

javascript - Strophe.Connection.addHandler 在调用 Strophe.Connection.sendIQ 时不起作用

jquery - 使用 jQuery Waypoints 插件的粘性导航栏

javascript - 国际电话号码 jQuery 插件 : flags and phone placeholder missing

javascript - 计算 2 个日期和时间之间的小时和分钟

jquery - 确定 jQuery UI Draggable 是否已初始化

css - 在移动/iOS View 上,有没有办法防止我的弹出窗口比我的页面高?