在前端开发中，我们经常需要为用户提供输入框以便他们进行交互。当一个输入框被点击或者获得了焦点时，通常情况下我们希望其中的文本自动被选中，这能够方便用户快速地编辑或者替换其中的文本。
在本文中，我们将会介绍如何使用 JavaScript 和 jQuery 中的技巧来实现这一目标。
使用 Vanilla JS
通过使用原生 JavaScript，我们可以很容易地为文本框添加事件监听器，从而在它获得焦点时选择其中的文本。以下是示例代码：
----- ----- - --------------------------------------------- ------------------------------- ------- -- - ---------------------- ---
以上代码做了以下几件事情：
- 获取所有
type属性为"text"的<input>元素； - 为该元素添加
focus事件监听器； - 当元素获得焦点时，调用
select()方法选中其中的文本。
这样一来，每当用户点击文本框或者通过 tab 键聚焦到文本框时，其中的文本都会被自动选中。
使用 jQuery
如果您更习惯使用 jQuery，那么同样可以轻松地实现这个效果。以下是示例代码：
----------------------------------- ---------- - ----------------- ---
以上代码中，我们使用 jQuery 的 $ 函数选中 type 属性为 "text" 的 <input> 元素，然后为其添加 focus 事件监听器。当元素获得焦点时，调用 .select() 方法选中其中的文本。
小结
通过使用上述方法，我们可以轻松地在输入框获得焦点时自动选中其中的文本，从而提高用户体验。无论您选择使用原生 JavaScript 还是 jQuery，都可以轻松实现这一功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8736