Angular Material Input如何实现点击时全选文本？

嘿，这个需求我之前做项目的时候也遇到过，确实能提升用户体验！下面给你分几种常用场景来讲解实现方式：

这是最通用的方式，不管你用什么项目都能直接用：

方式1：直接在HTML内绑定事件 #

最简单的写法，适合单个输入框的场景：

<input type="text" value="默认文本内容" onfocus="this.select()">

方式2：事件监听（推荐，更灵活） #

如果需要给多个输入框批量设置，或者不想把JS写在HTML里，用这种方式：

<input type="text" value="默认文本1" class="auto-select-input">
<input type="text" value="默认文本2" class="auto-select-input">

<script>
// 获取所有需要自动全选的输入框
const inputs = document.querySelectorAll('.auto-select-input');

inputs.forEach(input => {
  input.addEventListener('focus', function() {
    // 加个10ms的延迟是为了兼容部分浏览器（比如Chrome的自动填充会干扰全选）
    setTimeout(() => {
      this.select();
    }, 10);
  });
});
</script>

如果你的项目用了jQuery，可以用更简洁的写法：

<input type="text" value="默认文本" class="auto-select">

<script>
$('.auto-select').on('focus', function() {
  setTimeout(() => {
    $(this).select();
  }, 10);
});
</script>

现在很多项目用React，给你分享函数组件的实现方式：

import { useEffect, useRef } from 'react';

export default function AutoSelectInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    const handleFocus = () => {
      setTimeout(() => {
        // 可选链操作符避免null报错
        inputRef.current?.select();
      }, 10);
    };

    const inputElement = inputRef.current;
    if (inputElement) {
      inputElement.addEventListener('focus', handleFocus);
      // 组件卸载时移除事件监听，避免内存泄漏
      return () => inputElement.removeEventListener('focus', handleFocus);
    }
  }, []);

  return <input ref={inputRef} defaultValue="默认文本" />;
}

小提示 #

为什么要加setTimeout？因为部分浏览器的内置行为（比如自动填充、焦点跳转的默认逻辑）会优先于我们的select()执行，加个极短的延迟能确保全选操作生效，亲测在Chrome、Firefox、Edge都能正常工作。

内容的提问来源于stack exchange，提问作者Jus10