强制 TextField 选择焦点上的全文

Posted 2023-02-22

【中文标题】强制 TextField 选择焦点上的全文

【英文标题】：Force TextField to select full text on focus

【发布时间】：2019-06-11 03:24:14

【问题描述】：

每当我单击/点击/聚焦该字段时，我都希望获得一个 TextField 来选择当前在该字段中的整个文本。我自己在其他 React 应用程序中使用 onFocus 处理程序完成了此操作，该处理程序执行 event.target.select()，但这种方法似乎不适用于 Material-UI。使用 Material-UI TextFields，我可以看到选择短暂地覆盖了全文，然后它返回到仅在文本末尾闪烁的光标。

知道如何进行这项工作吗？

【问题讨论】：

请包含您在尝试中使用的代码。

原来这根本不是 Material-UI 问题。谢谢，瑞安，给了我一点压力。这是另一个没有任何 Material 组件的 React 应用程序，在 Safari 上表现出相同的行为。有趣的是，当我创建一个完全没有任何 React 的类似静态页面时，这个静态应用程序运行良好，即使在 Safari 中也是如此。所以我认为问题在于 React 和 Safari（不幸的是，还有 Mobile Safari），而不是 Material-UI。

仅供参考，我刚刚用更好的代码示例和***.com/q/54229359/383737 的 ReactJS 标签问了这个问题。

***.com/a/54229871/383737 得到了很好的回答。

【参考方案1】：

使用以下代码对我来说效果很好：

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";

function App() 
  return (
    <TextField
      defaultValue="test"
      onFocus=event => 
        event.target.select();
      
    />
  );


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如果这对您的问题没有帮助，请分享重现您问题的代码。

【讨论】：

感谢您提供此示例，奇怪的是，它的行为与我自己的（非常相似的）代码相同。然后我想在另一个浏览器上测试。此代码在 Chrome 上可以正常工作，但在 Safari 上不能正常工作（在 macOS 上都是最新的）。我将不得不用纯 javascript 对此进行测试，看看问题是否更深。

我只在 Chrome 上试过。如果有时间，我明天会在其他浏览器上对此进行更多研究。