Search code examples
javascriptselectinputreactjs

How to select all text in input with Reactjs, when it focused?


For example: codepen

var InputBox = React.createClass({
  render: function() {
    return (
      <input className="mainInput" value='Some something'></input>
    )
  }
});

Solution

  • Functional component:

    const handleFocus = (event) => event.target.select();
    const Input = (props) => <input type="text" value="Some something" onFocus={handleFocus} />
    

    ES6 class component:

    class Input extends React.Component {
        handleFocus = (event) => event.target.select();
    
        render() {
            return (
                <input type="text" value="Some something" onFocus={this.handleFocus} />
            );
        }
    }
    

    React.createClass:

    React.createClass({
        handleFocus: function(event) {
          event.target.select();
        },
    
        render: function() {
          return (
            <input type="text" value="Some something" onFocus={this.handleFocus} />
          );
        },
    })