用 jQuery 模拟按 Tab 键
Posted
技术标签:
【中文标题】用 jQuery 模拟按 Tab 键【英文标题】:Simulate pressing tab key with jQuery 【发布时间】:2012-03-02 02:47:25 【问题描述】:我在 .net 页面上有一些文本框,想用 jQuery 实现以下功能:如果用户按下回车键,程序应该表现得“好像”他使用了 tab 键,因此选择下一个元素。我尝试了以下代码(以及更多):
<script type="text/javascript">
jQuery(document).ready(function ()
$('.tb').keypress(function (e)
if (e.keyCode == 13)
$(this).trigger("keydown", [9]);
alert("return pressed");
);
);
<asp:TextBox ID="TextBox1" runat="server" CssClass="tb"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" CssClass="tb"></asp:TextBox>
但它只是不起作用!遗漏了什么,犯了错误?
这是我使用的一些链接
here
and here
【问题讨论】:
嗯,不;因为您没有将事件传递给函数。您需要使用:$('.tb').keypress(function(e)
,然后该函数可以访问事件,然后event.keyCode
,尽管我认为e.which
是规范化的jQuery 版本(可能需要也可能不需要)。
你能澄清“不起作用”吗?发生什么了?得到任何 JS 错误?
@DavidThomas:谢谢,已修复。
@ChristoferEliasson:什么都没发生。
Simulating the TAB keydown: focusing next element as determined by `tabIndex`的可能重复
【参考方案1】:
试试这个:
http://jsbin.com/ofexat
$('.tg').bind('keypress', function(event)
if(event.which === 13)
$(this).next().focus();
);
或循环版本:http://jsbin.com/ofexat/2
【讨论】:
谢谢,但这仅在找到以下同级元素时才有效,还是我弄错了?但它应该在任何情况下都有效。 你想循环元素吗? 如果元素是这样的将无法正常工作。<input class="input"><br><input class="input"><button>
第一个输入时输入找不到下一个输入,但找到了br
。使用next('.input')
还是不行。【参考方案2】:
我创建了一个simple jQuery plugin,它确实解决了这个问题。它使用 jQuery UI 的 ':tabbable' 选择器来查找下一个 'tabbable' 元素并选择它。
示例用法:
// Simulate tab key when enter is pressed
$('.tb').bind('keypress', function(event)
if(event.which === 13)
if(event.shiftKey)
$.tabPrev();
else
$.tabNext();
return false;
);
【讨论】:
谢谢,我没有使用hole插件,但是带有 :tabbable 的选择器是一个不错的脑洞:P 请注意:tabbable
需要jQuery UI依赖
我喜欢!对于我的用例,我修改了 javascript 以在每个函数的末尾包含 selectables.eq(prevIndex).select();
,以模拟 Tab 键选择下一个输入内容的方式。【参考方案3】:
从多个答案中,我为我组合了完美的解决方案,其中 enter 充当输入和选择的选项卡,并专注于下一个输入、选择或文本区域,同时允许在文本区域内输入。
$("input,select").bind("keydown", function (e)
var keyCode = e.keyCode || e.which;
if(keyCode === 13)
e.preventDefault();
$('input, select, textarea')
[$('input,select,textarea').index(this)+1].focus();
);
【讨论】:
这对我的项目来说几乎是完美的,但我不需要它来标记每个单选按钮。跳过同名输入的循环起到了作用。var nextInput = $('input,select,textarea')[$('input,select,textarea').index(this)+1]; while ($(this).attr('name') === $(nextInput).attr('name')) nextInput = $('input,select,textarea')[$('input,select,textarea').index(nextInput)+1];
它仍然卡在隐藏的输入中。通常它们可能位于表单的顶部,但我有一个条件隐藏的输入,它必须重新出现在正确的位置。
if (keyCode === 13)
更好【参考方案4】:
试试这个
$(this).trigger(
type: 'keypress',
which: 9
);
【讨论】:
谢谢,但它仍然没有反应。 检查 JS 控制台是否有错误,也可以尝试在干净的 html 文件中单独运行代码,看看是否可以生成所需的特定情况。比尝试将其移动到您的主文件。 你能提供一个好的小提琴吗?因为我试过了,没用。见here。 对我也不起作用 - Code Pen. @SaeedNamati 我已经更新了小提琴。$(function() $('#first').focus(); $('button').click(function() $('#first').trigger( type: 'keypress', which: 9 ); ); $('#first').on('keypress', function(e) if (e.which == 9) alert("Tab Pressed!"); $(this).next().focus(); ); );
以上是关于用 jQuery 模拟按 Tab 键的主要内容,如果未能解决你的问题,请参考以下文章