在获得焦点时选择文本框的内容（使用 Vanilla JS 或 jQuery）

在前端开发中，我们经常需要为用户提供输入框以便他们进行交互。当一个输入框被点击或者获得了焦点时，通常情况下我们希望其中的文本自动被选中，这能够方便用户快速地编辑或者替换其中的文本。

在本文中，我们将会介绍如何使用 JavaScript 和 jQuery 中的技巧来实现这一目标。

使用 Vanilla JS

通过使用原生 JavaScript，我们可以很容易地为文本框添加事件监听器，从而在它获得焦点时选择其中的文本。以下是示例代码：

const input = document.querySelector('input[type="text"]');
input.addEventListener('focus', (event) => {
  event.target.select();
});

以上代码做了以下几件事情：

1. 获取所有 type 属性为 "text" 的 <input> 元素；
2. 为该元素添加 focus 事件监听器；
3. 当元素获得焦点时，调用 select() 方法选中其中的文本。

这样一来，每当用户点击文本框或者通过 tab 键聚焦到文本框时，其中的文本都会被自动选中。

使用 jQuery

如果您更习惯使用 jQuery，那么同样可以轻松地实现这个效果。以下是示例代码：

$('input[type="text"]').on('focus', function() {
  $(this).select();
});

以上代码中，我们使用 jQuery 的 $ 函数选中 type 属性为 "text" 的 <input> 元素，然后为其添加 focus 事件监听器。当元素获得焦点时，调用 .select() 方法选中其中的文本。

小结

通过使用上述方法，我们可以轻松地在输入框获得焦点时自动选中其中的文本，从而提高用户体验。无论您选择使用原生 JavaScript 还是 jQuery，都可以轻松实现这一功能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8736