当前位置：文江博客话题详情

HTML 元素：如何模拟按下“选项卡”？钥匙

发布于 2024-09-06 05:06:29 字数 98 浏览 3 评论 0原文

我想触发与在具有焦点的元素上按 Tab 键相同的效果。有什么办法可以做到这一点吗？我试图让焦点跳到下一个元素。

谢谢！

（jQuery 是一个选项）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感性 2024-09-13 05:06:29

像这样（使用 jQuery）：

    <!DOCTYPE html>

    <html lang="en">

        <head>

            <title>LOL Focus!</title>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

        </head>

        <form>
          <input class="focusable" type="text" value="lol"/>
          <input class="focusable" type="text" value="lol" />
          <input class="focusable" type="text" value="lol" />
          <input class="focusable" type="text" value="lol" />
          <input class="focusable" type="text" value="lol" />
          <input class="focusable" type="text" value="lol" />                 
        </form> 

        <input type="button" id="trigger_button" value="lol" />

        <script type="text/javascript">
        $(function() {

          var focusable = $('.focusable'),
              last_element_index = focusable.length - 1,
              current_index;

          focusable.each(function(i) {
            $(this).click(function() {
              current_index = i;
            })
          });

           $('#trigger_button').click(function() {
             current_index = (should_reset_current_index()) ? 0 : current_index + 1;
             focusable[current_index].focus();
           });

           function should_reset_current_index() {
             return (typeof(current_index) === 'undefined') || (current_index == last_element_index)
           }

        });
      </script>

    </html>

Something like this (with jQuery):

    <!DOCTYPE html>

    <html lang="en">

        <head>

            <title>LOL Focus!</title>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

        </head>

        <form>
          <input class="focusable" type="text" value="lol"/>
          <input class="focusable" type="text" value="lol" />
          <input class="focusable" type="text" value="lol" />
          <input class="focusable" type="text" value="lol" />
          <input class="focusable" type="text" value="lol" />
          <input class="focusable" type="text" value="lol" />                 
        </form> 

        <input type="button" id="trigger_button" value="lol" />

        <script type="text/javascript">
        $(function() {

          var focusable = $('.focusable'),
              last_element_index = focusable.length - 1,
              current_index;

          focusable.each(function(i) {
            $(this).click(function() {
              current_index = i;
            })
          });

           $('#trigger_button').click(function() {
             current_index = (should_reset_current_index()) ? 0 : current_index + 1;
             focusable[current_index].focus();
           });

           function should_reset_current_index() {
             return (typeof(current_index) === 'undefined') || (current_index == last_element_index)
           }

        });
      </script>

    </html>

回复收藏 0 原文

我要还你自由 2024-09-13 05:06:29

不久前需要模拟选项卡功能，现在我已经将其作为库发布，它使用 < a href="/questions/tagged/jquery" class="post-tag" title="显示标记为'jquery'的问题" rel="tag">jquery。

EmulateTab：一个 jQuery 插件，用于模拟页面上元素之间的 Tab 键切换。

您可以在演示中查看它的工作原理。

if (myTextHasBeenFilledWithText) {
  // Tab to the next input after #my-text-input
  $("#my-text-input").emulateTab();
}

Needed to emulate the tab functionality a while ago, and now I've released it as a library that uses jquery.

EmulateTab: A jQuery plugin to emulate tabbing between elements on a page.

You can see how it works in the demo.

if (myTextHasBeenFilledWithText) {
  // Tab to the next input after #my-text-input
  $("#my-text-input").emulateTab();
}

回复收藏 0 原文

~没有更多了~

关于作者

何其悲哀

暂无简介

0 文章

0 评论

20 人气

关注发私信

lioqio

文章 0 评论 0

关注

Single

文章 0 评论 0

关注

禾厶谷欠

文章 0 评论 0

关注

alipaysp_2zg8elfGgC

文章 0 评论 0

关注

qq_N6d4X7

文章 0 评论 0

关注

放低过去

文章 0 评论 0

友情链接

文江博客

HTML 元素：如何模拟按下“选项卡”？钥匙

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

HTML 元素：如何模拟按下“选项卡”？钥匙

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lioqio

Single

禾厶谷欠

alipaysp_2zg8elfGgC

qq_N6d4X7

放低过去

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。