0

estoy haciendo un formulario donde tengo un campo editable en que escribo y cuando doy enter capturo el evento del teclado y pongo su texto dentro de un div justo delante del mismo campo. Luego cuando presione la tecla de borrar(Backspace) si en el campo de texto hay contenido no pasa nada pero si el campo de texto está vacío, automaticamente el texto que está en el div anterior debe ser eliminado e insertar su texto en campo editable. Esto ya lo logré a la perfección, mi problema está en que cuando le agrego el texto al campo el cursor para escribir o borrar se posiciona en la primera posición del campo y necesito que esté en la última para seguir borrando o escribiendo si fuera el caso.

aquí les dejo el código en el momento que capturo el evento del backspace y todo eso funciona el problema es lo del cursor al principio

{
    if (e.keyCode == 8) {
          if ($("#texto").html() == "") {
            let cant = $(".divContactInside").toArray().length;//obtengo la cantidad de divs
 
            let lastdiv = $(".divContactInside:nth-child(" + cant + ")");// selecciono el ultimo div
            let text = $(".divContactInside:nth-child(" + cant + ")").find('span') //selecciono el span que contiene el texto dentro del div
            text = (text[0].innerHTML) //guardo en variable dicho texto
            $(".divContactInside:nth-child(" + cant + ")").remove() //elimino el ultimo div
            $("#texto").append(text)//agrego el texto al campo editable
//y ahora es el problema de que como el campo estaba con el cursor en la posicion 0
// cuando le agrego el texto sigue con el cursor en posicion 0 y no en el final del texto que es como lo necesito
//he provado con las funciones de selection pero algo no estoy haciendo bien porque no me funciona
 
}
1
  • Puedes utilizar este ejemplo: let input = document.getElementById("texto"); let textLength = input.value.length; input.setSelectionRange(textLength, textLength); Con esto, el cursor se posicionará al final del texto, espero te sirva. Commented el 4 ene. 2023 a las 18:54

1 respuesta 1

1

puedes probar esta función:

function moveCursorToEnd(id) {
  var el = document.getElementById(id) 
  el.focus()
  if (typeof el.selectionStart == "number") {
      el.selectionStart = el.selectionEnd = el.value.length;
  } else if (typeof el.createTextRange != "undefined") {           
      var range = el.createTextRange();
      range.collapse(false);
      range.select();
  }
}
<input id="myinput" type="text" />
<a href="#" onclick="moveCursorToEnd('myinput')">Mover cursor al final</a>

En tu caso la llamarías asi:

//.....
$(".divContactInside:nth-child(" + cant + ")").remove()
$("#texto").append(text)
moveCursorToEnd('texto')

Tu Respuesta

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

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