Sometimes, we want to select all text in an input element with React when it is focused.
In this article, we’ll look at how to select all text in an input element with React when it is focused.
Select All Text in an Input Element with React When it is Focused
To select all text in an input element with React when it is focused, we can use the select method of the input element to select all the text in it when it’s focused.
For instance, we can write:
import React from "react";
export default function App() {
const handleFocus = (event) => event.target.select();
return (
<input readOnly type="text" value="Some something" onFocus={handleFocus} />
);
}
We create the App component with the handleFocus function that calls the select method to select all the text entered into the input.
And we pass that to the onFocus prop so that it’s called when we focus on the input.
We focus on it when we click on the input element.
So when we click on it, all the text in it will be selected.
Conclusion
To select all text in an input element with React when it is focused, we can use the select method of the input element to select all the text in it when it’s focused.
