选项卡时选择文本区域文本答案

【问题标题】：Selecting textarea text when tabbing选项卡时选择文本区域文本
【发布时间】：2012-05-11 05:42:30
【问题描述】：

我在 Stack Overflow 上找到了this question，并使用了顶部答案中给出的代码。

否则它的效果非常好，但是有一个问题；在我的页面上，我有多个文本区域。其实我用的选择器就是"textarea"。

但是，当从一个文本区域“切换”到另一个文本区域时（使用 Tab 键跳转到下一个区域），显然焦点事件不会触发，文本也不会被选中。

如何修改该代码以通过单击和 Tab 来工作？

这里是JSFiddle； http://jsfiddle.net/qQDbZ/ 我在 Chrome 上，点击 textarea 时会全选，而 Tab 键不会。

【问题讨论】：

你能把代码弄乱吗？
当用户进入文本区域时，焦点肯定会触发。
它在 Opera 和 Chrome 中运行良好（它可以正确触发 onfocus 事件）。虽然没有在其他浏览器中测试。你能给我们提供一个例子吗，请告诉我们它在哪些浏览器中不起作用。
摆弄； jsfiddle.net/qQDbZ
我遇到了完全相同的问题。在 Win7 和 Chrome v21.0.1180.83 和 OSX 10.7.4 和 Chrome v21.0.1180.82 和 Safari 6.0 (7536.25) 上测试。在 Firefox 和 IE（以及可能所有其他非 webkit 浏览器）中运行良好。使用 tab 键导航时肯定会触发焦点事件，但未选择 textarea 中的文本。单击时，一切正常。

标签： javascript jquery focus textarea

【解决方案1】：

我能够通过以下解决方法来解决这个问题：

$('textarea').focus(function() {
    var $this = $(this);
    $this.select().mouseup(function() {
        $this.off('mouseup');
        return false;
    });
}).keyup(function(e) {
    if(e.which === 9) {
        this.select();
    }
});

演示：http://jsfiddle.net/KfFPM/3/

我在 Chrome 21、Safari 6、Firefox 14、Opera 12 和 IE 9 中测试了上述内容。稍后我会测试更多版本；我现在很高兴。向前使用制表符和向后移动+制表符时有效。

绑定到keydown 无效。

我仍然认为这种解决方法应该是不必要的。我最好的猜测是 webkit 浏览器将选项卡检测为 textarea 内的按键，因此取消选择文本，就像您在 textarea 中选择了一些文本然后开始输入时任何浏览器一样。

【讨论】：

谢谢！完美运行 :) -- 你知道这是否已经是 Webkit 跟踪器中报告的错误吗？

【解决方案2】：

$('input[type="textarea"]').keydown(function(event){
    var keypressed = event.keyCode || event.which,
    tab = 9,
    $this = $(this);

    if(keypressed === tab){
       $this.next('textarea').focus();
    }
});

不确定到底是什么问题，但如果您需要强制解决，这应该可行。

【讨论】：

【解决方案3】：

$('textarea').focus(function() {
    var $this = $(this);
    $this.select();
}).keyup(function(e) {
    if(e.which === 9) {
        this.select();
    }
}).off('mouseup',function(){
    return false;
})

【讨论】：

可能想要将那个幻数更改为 jQuery 提供的常量 $.ui.keyCode.TAB。它的可读性略高。
另外，你能解释一下你的代码吗？ Code-only answers 通常不受欢迎，因为在没有任何解释的情况下，它们无法帮助提问者和其他人了解您所做的事情。
要进一步 @WaiHaLee 的评论，您应该解释为什么您的答案解决了其他答案没有解决的问题。