正文

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

 2023-05-07  306

关键词：

【中文标题】选项卡时选择文本区域文本【英文标题】：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 中的文本。单击时，一切正常。 【参考方案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 的评论，您应该解释为什么您的答案解决了其他答案没有解决的问题。

Angularjs使用选项从模板添加值创建文本区域

】Angularjs使用选项从模板添加值创建文本区域【英文标题】：AngularjsCreatetextareawithoptionaddvaluefromtemplate【发布时间】：2018-01-0106:03:05【问题描述】：我正在尝试创建一个表单文本区域，用户可以在其中键入文本并可以选择一些预... 查看详情

自动选择文本区域文本

<textarearows="10"cols="50"onclick="this.focus();this.select()"readonly="readonly">exampletext</textarea> 查看详情

选择文本区域的最后一行

】选择文本区域的最后一行【英文标题】：SelectingLastlineofTextArea【发布时间】：2015-07-1108:24:20【问题描述】：我正在尝试创建一个java文本区域，它是使用文本创建的“在这里聊天！”被放置在文本区域内。然后我希望他们输入... 查看详情

java示例代码_选择列表中的项目，在文本区域显示文本

java示例代码_选择列表中的项目，在文本区域显示文本查看详情

在 IE 8 中以编程方式选择文本区域中的文本

】在IE8中以编程方式选择文本区域中的文本【英文标题】：SelecttextintextareaprogramaticallyinIE8【发布时间】：2012-10-1604:48:52【问题描述】：我一直在尝试根据开始和结束索引以编程方式在文本区域中选择文本，但由于某种原因，选... 查看详情

突出显示文本区域内的文本

...以帮助您入门。这里是在文本区域***.com/a/50285928/441016中选择文本的示例。【参考方案1】查看详情

单击提交按钮时将自定义文本从选择框提交到文本区域

】单击提交按钮时将自定义文本从选择框提交到文本区域【英文标题】：Submittingcustomtextfromselectboxintotextareawhensubmitbuttonisclicked【发布时间】：2021-11-0306:46:55【问题描述】：点击“发布线程”按钮后，我希望它根据在选择框中选... 查看详情

如何在没有输入文本区域的情况下阻止文本选择并选择项目

】如何在没有输入文本区域的情况下阻止文本选择并选择项目【英文标题】：howtoblocktextselectionwithoutinputtextareaandselectitems【发布时间】：2011-06-0700:47:47【问题描述】：我实际上有可以在IE中运行但不能在其他浏览器中运行的脚本... 查看详情

即使文本区域没有焦点，也能指示选定的文本

...06:53:21【问题描述】：在Firefox和Chrome中，文本字段的文本选择（=在字段中选择的文本范围）仅在该字段具有焦点时才会显示。即使字段没有焦点，选择确实存在-它可以从JavaScript查询，并且如果字段以不改变选查看详情

如何从 jquery 的文本区域中获取选定的文本？ [复制]

...间】：2013-04-0820:10:07【问题描述】：如果我从文本区域中选择文本，我需要知道选择了哪个文本，例如“helloworld”如果我选择hello，我想看到hello被选中我如何在jquery中执行此操作。我想让它加粗。<textarea 查看详情

带有上传附件选项 HTML/JQuery 的文本区域

】带有上传附件选项HTML/JQuery的文本区域【英文标题】：TextareawithuploadattachmentsoptionsHTML/JQuery【发布时间】：2018-12-1608:54:39【问题描述】：我创建了允许用户输入文本的文本区域，如下所示：<!DOCTYPEhtml><html><body><te... 查看详情

jQuery - 从文本区域中删除用户输入文本

...【问题描述】：好的，我有一个设备列表，我可以在其中选择要编辑的设备。我有3个状态可供编辑。未选择任何设备时、选择了1个设备或选择了x个设备时。我遇到的问题是，当用户在textarea（commentField）中键入一些文本并取消... 查看详情

在 Chrome 中无法选择文本区域

】在Chrome中无法选择文本区域【英文标题】：TextareanotselectableinChrome【发布时间】：2018-07-1219:20:39【问题描述】：是否可以在谷歌浏览器（我使用的是63.0.3239.132版本）中使文本区域无法选择（仅内部文本无法选择）？在Edge、Explo... 查看详情

单击后将标题文本动态放入文本区域

...:54:33【问题描述】：基本上我有一个按钮，点击后我想在选择列表中自动选择主题（它确实如此）并获取h3和h5文本并将其放入textarea。这是我的代码：$(\'.order-button\').click(function()varproductNa 查看详情

如何将选定的文本包装在文本区域中？

...发布时间】：2010-12-1507:22:15【问题描述】：如何获取用户选择的文本（就在textarea内）并对其应用操作，例如包装选择[#bold]selectedtext[/bold]？【问题讨论】：【参考方案1】：以Soufiane发布的内容为基础，以下是转换为jquery的代码... 查看详情

如何获取文本区域中选择的起点和终点？

】如何获取文本区域中选择的起点和终点？【英文标题】：Howtogetthestartandendpointsofselectionintextarea?【发布时间】：2011-03-0411:17:52【问题描述】：我想获取文本字段或文本区域中选定范围的光标开始和结束位置。Itriedlotoffunctionsinvar... 查看详情

识别不同文本区域中的光标位置并在列表框中选择项目时插入文本

】识别不同文本区域中的光标位置并在列表框中选择项目时插入文本【英文标题】：Identifythecursorpositionindifferenttextareaandinserttextonselectingitemsinalistbox【发布时间】：2012-10-2321:53:16【问题描述】：谁能帮我解决这个问题？我有一个... 查看详情

在光标位置将文本插入文本区域时出现 IE 问题

...域，然后单击同一页面上的树视图节点，以将节点的文本选择到我在单击树节点之前放置光标的文本区域。我得到了很多关于堆栈溢出的答案，包括以下，Insertingtextinte 查看详情