如何在 React 中实现 input 获得焦点时自动选中输入框内的文本？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要实现让输入框获得焦点后自动选中其中的文本，以便用户快速修改输入内容。在 React 中，我们可以通过监听 input 的 focus 事件来实现这一功能。

监听 input 的 focus 事件

首先，在 React 组件中定义一个 ref，用来获取 input 元素：

------ ------ - ------ - ---- --------

-------- ------------- -
  ----- -------- - -------------

  ------ -
    ------ -------------- --
  --
-

接着，在 input 上添加 onFocus 事件监听器，并在事件处理函数中调用 select 方法：

------ ------ - ------ - ---- --------

-------- ------------- -
  ----- -------- - -------------

  -------- ------------- -
    --------------------------
  -

  ------ -
    ------ -------------- --------------------- --
  --
-

现在，当 input 获得焦点时，它内部的文本就会被选中了。

代码示例

下面是一个完整的示例：

------ ------ - ------ - ---- --------

-------- -------------------- -
  ----- -------- - -------------

  -------- ------------- -
    --------------------------
  -

  ------ -
    -----
      ------ ------------------------ ---- -------------
      ------ ------------- ----------- -------------- --------------------- --
    ------
  --
-

------ ------- -------------------

总结

通过监听 input 的 focus 事件并调用 select 方法，我们可以实现让输入框获得焦点后自动选中其中的文本。这个功能对于提高用户体验和减少用户操作时间非常有帮助。

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