如何阻止我的代码将标签放入我的文本框中答案

【问题标题】：How to stop my code putting tabs into my text boxes如何阻止我的代码将标签放入我的文本框中
【发布时间】：2014-12-16 23:58:56
【问题描述】：

我有这段 jQuery 来检测光标何时在文本框内。这个想法是突出显示文本框出现的表格行。

$(".text").on("focus", function() { //do something });

问题是这段代码似乎在文本框中注册了 tab 键。当我按 Tab 键时，光标仍会移动到下一个文本框。但是它总是在框中插入一个制表符空间！！

这是最出乎意料的，我必须承认我对此有点困惑......

在这件事上的任何帮助都会很棒，谢谢。

【问题讨论】：

你能设置一个问题的演示吗？听起来很奇怪。
这是一个快速的小提琴......jsfiddle.net/5cjbcy9o - 尝试通过文本框“制表” - 它实际上在文本框中输入了一个制表符
这似乎与警报有关。如果我用警报注释掉该行，它不会插入制表符。

标签： javascript jquery onfocus

【解决方案1】：

您在focus 事件中发送的alert() 似乎正在以一种奇怪的方式打断事情。您可以通过在发送警报之前设置一个短暂的超时来解决此问题；确保在文本框获得焦点并处理选项卡输入之后发送警报。

setTimeout(function() { alert("box selected"); }, 1);

http://jsfiddle.net/5cjbcy9o/2/

【讨论】：

【解决方案2】：

像这样给每一行一个tabindex
var i=2; $('tr').each($(this).attr('tabindex',i++))

【讨论】：

【解决方案3】：

A previous answer 已通过检查keyCode 以查看它是否与9 匹配来解决监听tab 键的问题。但是，制表符的宽度不同（也取决于个人喜好），尽管通常是两个或四个空格。因此，您可以在检测到 tab keydown 事件时将该空格附加到输入文本的值中。

在以下代码中，我选择使用四个空格：

$(function () {
    $(".text").on("focus", function () {
        console.log("box selected");
    }).on("keydown", function(e) {
        if ((e.keyCode || e.which) == 9) {
            e.preventDefault();
            $(this).val($(this).val() + "    ");
        }
    });
});

在此处查看概念验证小提琴：http://jsfiddle.net/teddyrised/5cjbcy9o/1/

【讨论】：