Por ejemplo: codepen
var InputBox = React.createClass({
render: function() {
return (
<input className="mainInput" value='Some something'></input>
)
}
});
javascript
select
input
reactjs
Alexander Shtang
fuente
fuente
<input type='text' value='Some something' onFocus={e => e.target.select()} />
disabled
cuadro de texto? jsfiddle.net/69z2wepo/317733disabled
, usereadOnly
: jsfiddle.net/kxgsv678var 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 ().
fuente
Gracias lo aprecio. Lo hice asi:
var input = self.refs.value.getDOMNode(); input.focus(); input.setSelectionRange(0, input.value.length);
fuente
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'
fuente
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.
fuente
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} />
fuente