获得焦点时选择“只读”<input /> 中的所有文本

Posted 2023-03-05

【中文标题】获得焦点时选择“只读”<input /> 中的所有文本

【英文标题】：Select all text in a 'readonly' <input /> when it gains focus

【发布时间】：2012-12-02 23:18:21

【问题描述】：

我有一个文本框（设置为只读），我需要选择它的内容，以便在获得焦点时轻松复制/粘贴。使用下面的代码似乎只能快速选择文本，然后由于某种原因取消选择它。

HTML

<input id='thing' type='text' value='some text' readonly='readonly' />​

JavaScript

document.getElementById('thing').onfocus = function()
    this.select();
;​

小提琴：http://jsfiddle.net/cfqje/

【问题讨论】：

重复？ ***.com/questions/4067469/…

Fiddle 在 Firefox 中为我工作。 IE8 也一样。哪个浏览器不适合您？

@John 是的，我的错。我想我忘了接受这个。我现在有。

@MikeChristensen 小提琴在 Chrome 45 上对我不起作用

嗯，很奇怪，是的，它在 Chrome 45 中也不再适用于我。将其更改为 onclick 事件确实适用于鼠标点击，但这意味着当该字段通过键盘导航获得焦点时它将不再起作用：/

【参考方案1】：

您现在可以使用 CSS。使用user-select: all; 时，单击元素时将选择所有文本。

【讨论】：

我非常喜欢这个，只是要注意 "all" 选项在 Safari 中可能有问题，根据MDN。

不适用于readonly elments（刚刚在 Chrome 86 中测试过）

【参考方案2】：

这似乎是一种解决方法：

<input id='thing' type='text' value='some text' onclick="this.select()" readonly='readonly' />​

我想问题是焦点无法正常工作，因为输入是只读的。

【讨论】：

内联脚本。啧啧啧。