2

Tengo una inquietud que me gustaría compartir con ustedes en aras de poder encontrar una solución.

Estoy utilizando React para la implementación de un proyecto y necesito en uno de mis formularios que al realizar el autofocus de uno de sus inputs el cual ya posee un valor inicial, el cursor se ubique al inicio; es decir antes del value inicial. Muestro parte del código para que tengan una idea de lo que deseo hacer.

Constructor del componente

constructor(props) {
    super(props);
    this.state = {url: '.feeel.ai'};

    ...
}

En this.state = {url: '.myurl.com'}; establezco el valor inicial del input. La idea es que al comenzar a escribir termine de esta forma el value del input: urldeusuario.myurl.com.

Parte del render del componente donde deseo hacer el trabajo

<input type="text"
       className="name-field-container label-input"
       placeholder="myURL"
       ref="url"
       value={this.state.url}
       onChange={this.handleChange}
       onKeyUp={this.enterKeyPress}
       onFocus={this.onFocusValue}/>

Con this.onFocusValue invoco a la función que debería realizar el trabajo que deseo.

1 respuesta 1

3

Esto no es cuestión de React.js, es simple JavaScript. Lo que buscas se logra mediante setSelectionRange:

document.getElementById("prueba").addEventListener("click", onFocusValue);


function  onFocusValue () {
      this.setSelectionRange(0, 0);
    }
<input type="text" value="prueba" id="prueba">

4
  • 1
    (si no te parece mal hice una versión ejecutable. sientete libre de revertirlo si no te gusta)
    – lois6b
    el 11 abr. 2017 a las 14:16
  • Gracias por tomarte la molestia, @lois6b.
    – gugadev
    el 11 abr. 2017 a las 14:19
  • Nada, así creo que es más claro para el usuario ^^ Un saludo
    – lois6b
    el 11 abr. 2017 a las 14:20
  • Me ha funcionado a la perfeccion, muchas gracias. el 11 abr. 2017 a las 18:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.