Javascript 如何在打开后捕捉iframe中的向下键_Javascript_Jquery_Jquery Ui_Iframe_Fancybox

Javascript 如何在打开后捕捉iframe中的向下键

javascript jquery jquery-ui iframe

Javascript 如何在打开后捕捉iframe中的向下键,javascript,jquery,jquery-ui,iframe,fancybox,Javascript,Jquery,Jquery Ui,Iframe,Fancybox,Fancybox在iframe中显示pikachoose图像查看器。键盘键用于在图像之间导航初始加载时忽略关键点。仅当在fancybox中单击时，按键才起作用。我补充说但这不能启用密钥。如果iframe打开，如何允许密钥立即工作 iframe内容是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html> <head> <link type="text/css" hre

Fancybox在iframe中显示pikachoose图像查看器。键盘键用于在图像之间导航初始加载时忽略关键点。仅当在fancybox中单击时，按键才起作用。我补充说

但这不能启用密钥。如果iframe打开，如何允许密钥立即工作

iframe内容是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html>
<head>
    <link type="text/css" href="Pikachoose/bottom.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script src="Pikachoose/jquery.pikachoose.full.js"></script>

    <script type="text/javascript">
            $(document).ready(function () {
                $("#pikame").PikaChoose({
                    autoPlay: false
                });

                $("html").keydown(function (evt) {
                    $('#pikame').data('pikachoose').Next();
                });
              // why this does not allow keydown event:
              $('.pikachoose').focus();
            });
    </script>
</head>
<body>
    <div class="pikachoose">
        <ul id="pikame">
            <li>
                <img src="img1" />
            </li>
            <li>
                <img src="img2" />
            </li>
            <li>
                <img src="img3" />
            </li>
        </ul>
    </div>
</body>
</html>

jQuery选择器用于id，而不是类
将javascript更改为$（“.pikachoose”）.focus（）
或将class=“pikachoose”
更改为id=“pikachoose”

编辑：
通常不能聚焦任意元素，例如div。但有一种伪黑客可能会奏效：在元素上放置一个tabindex。您可以使用-1来防止对制表符的不必要干扰。因此，要么将tabindex=“-1”
放在该div上，要么您可以将$（“.pikachoose”）.attr（“tabindex”，-1）.focus（）
放在您的代码中。
谢谢。我将代码更改为“$”（'.pikachoose'）.focus（）；`但问题依然存在。我更新了问题。啊，我没有（哈！）关注你试图专注于一个div的事实。更新了答案。谢谢。成功了。这是一个最佳实践，还是我应该将重点放在其他元素上？对于您的场景（处理击键），这似乎是一个很好的解决方案。如果您正在处理表单元素，您可以更具体地聚焦一些真正具有焦点的内容：$（“：input”）.first（）.focus（）如果在iframe内部的背景中单击，它将在不使用tabindex=-1的情况下接收焦点。哪个元素受到关注？也许keydown可以将焦点设置为相同的元素？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <html>
<head>
    <link type="text/css" href="Pikachoose/bottom.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script src="Pikachoose/jquery.pikachoose.full.js"></script>

    <script type="text/javascript">
            $(document).ready(function () {
                $("#pikame").PikaChoose({
                    autoPlay: false
                });

                $("html").keydown(function (evt) {
                    $('#pikame').data('pikachoose').Next();
                });
              // why this does not allow keydown event:
              $('.pikachoose').focus();
            });
    </script>
</head>
<body>
    <div class="pikachoose">
        <ul id="pikame">
            <li>
                <img src="img1" />
            </li>
            <li>
                <img src="img2" />
            </li>
            <li>
                <img src="img3" />
            </li>
        </ul>
    </div>
</body>
</html>