如何在 React 中实现 input 获得焦点时自动选中输入框内的文本?

阅读时长 2 分钟读完

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

监听 input 的 focus 事件

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

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

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

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

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

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

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

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

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

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

代码示例

下面是一个完整的示例:

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

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

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

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

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

总结

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

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/29086

纠错
反馈