¿Cómo seleccionar todo el texto en la entrada con Reactjs, cuando se enfocó?


Respuestas:


188

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} />
      );
    },
})

1
esto funciona en función pura (sin clase), gracias por esta solución.
Jan Jarčík

11
Se puede simplificar aún más sin la necesidad de la función adicional en caso de que sea solo para un campo en la clase:<input type='text' value='Some something' onFocus={e => e.target.select()} />
TK123


1
¿Cómo hago para que esto funcione para un disabledcuadro de texto? jsfiddle.net/69z2wepo/317733
Rahul Desai

3
@RahulDesai En lugar de disabled, use readOnly: jsfiddle.net/kxgsv678
dschu

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()}}
      />
    )
  }
});

Tienes que configurar ref en la entrada y cuando estás enfocado tienes que usar select ().


5

Gracias lo aprecio. Lo hice asi:

var input = self.refs.value.getDOMNode();
            input.focus();
            input.setSelectionRange(0, input.value.length);

1

En mi caso, quería seleccionar el texto desde el principio después de que apareciera la entrada en el modal:

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

<input ref='copy'

0
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;

Seleccione automáticamente todo el contenido de una entrada para una clase de reacción. El atributo onFocus en una etiqueta de entrada llamará a una función. La función OnFocus tiene un parámetro llamado evento generado automáticamente. Como se muestra arriba, event.target.select () establecerá todo el contenido de una etiqueta de entrada.


0

Componente funcional de otra forma con 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}
/>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.