145

For example: codepen 

var InputBox = React.createClass({
  render: function() {
    return (
      <input className="mainInput" value='Some something'></input>
    )
  }
});
Edgar
  • 6,022
  • 8
  • 33
  • 66
Alexander Shtang
  • 1,819
  • 4
  • 15
  • 24

7 Answers7

281

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} />
      );
    },
})
Community
  • 1
  • 1
dschu
  • 4,992
  • 5
  • 31
  • 48
  • 1
    this works in pure function (no class), thx for this solution. – Jan Jarčík Dec 22 '16 at 08:13
  • 4
    @TK123 [You should avoid arrow functions in your render methods](https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36). It also violates [jsx-no-bind](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md) which is used by [eslint-config-airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) for example. – dschu Apr 11 '18 at 15:56
  • 1
    How do I get this working for a `disabled` textbox? https://jsfiddle.net/69z2wepo/317733/ – Rahul Desai Nov 02 '18 at 18:05
  • 3
    @RahulDesai Instead of `disabled`, use `readOnly`: https://jsfiddle.net/kxgsv678/ – dschu Nov 05 '18 at 09:57
  • is It possible select only a part of the text? – Angelotti Jan 29 '19 at 07:45
  • @MatteoAngelotti It's not meant to do that, but there may be a workaround. [`The HTMLInputElement.select() method selects all the text in a – dschu Jan 29 '19 at 08:42
  • on mobile this triggers the context menu. Is there a way to avoid that? – Juan Solano Aug 20 '20 at 23:18
  • @Angelotti, you can select a part of the text the following way: https://stackoverflow.com/a/54417080/5506730 – gazdagergo Jul 24 '22 at 03:58
11

Another Way Functional Component with useRefHook:

const inputEl = useRef(null);

function handleFocus() {
  inputEl.current.select();
}

<input
  type="number"
  value={quantity}
  ref={inputEl}
  onChange={e => setQuantityHandler(e.target.value)}
  onFocus={handleFocus}
/>
Igor Pavlenko
  • 631
  • 1
  • 8
  • 15
10

let's add the simplest based on @dschu's answer:

...
<input type='text' value='Some something' onFocus={e => e.target.select()} />
...
Facundo Colombier
  • 3,487
  • 1
  • 34
  • 40
6

Thanks, I appreciate it. I did it so: 

var input = self.refs.value.getDOMNode();
            input.focus();
            input.setSelectionRange(0, input.value.length);
Alexander Shtang
  • 1,819
  • 4
  • 15
  • 24
5
var InputBox = React.createClass({
  getInitialState(){
    return {
      text: ''
    };
  },
  render: function () {
    return (
      <input
        ref="input"
        className="mainInput"
        placeholder='Text'
        value={this.state.text}
        onChange={(e)=>{this.setState({text:e.target.value});}}
        onFocus={()=>{this.refs.input.select()}}
      />
    )
  }
});

You have to set ref on the input and when focused you have to use select().

obreja catalin
  • 150
  • 1
  • 5
1
var React = require('react');

var Select = React.createClass({
    handleFocus: function(event) {
        event.target.select()
    },
    render: function() {
        <input type="text" onFocus={this.handleFocus} value={'all of this stuff'} />
    }
});

module.exports = Select;

Auto select all content in a input for a react class. The onFocus attribute on a input tag will call a function. OnFocus function has a parameter called event generated automatically. Like show above event.target.select() will set all the content of a input tag.

Kylo Jorgensen
  • 11
  • 2
1

In my case I wanted to select the text from the beginning after the input appeared in the modal:

componentDidMount: function() {
    this.refs.copy.select();
},

<input ref='copy'
Lukas Lukac
  • 7,766
  • 10
  • 65
  • 75