1

He creado varios botón que representan algunas etiquetas de HTML5 como por ejemplo un botón que al hacer click aparece la apertura y el cierre de la etiqueta <strong></strong>

Pero resulta que cuando hago ese click, la etiqueta me la coloca justo al final del texto y yo quiero que la coloque justo donde esta el cursor que dibuja las letras que escribo.

Estos son los botones:

<button id="p" type="button" class="waves-effect pink darken-2 btn">p</button>

<button id="strong" type="button" class="waves-effect pink darken-2 btn">strong</button>

<button id="b" type="button" class="waves-effect pink darken-2 btn">B</button>

<button id="a" type="button" class="waves-effect pink darken-2 btn">Enlace</button>

<button id="h2" type="button" class="waves-effect pink darken-2 btn">h2</button>

<button id="h3" type="button" class="waves-effect pink darken-2 btn">h3</button>

Este es el código JavaScript que se encarga de escribir las tag cuando el usuario hace click en el botón

var cuerpo = document.querySelector('#cuerpo');
var parrafo = document.querySelector('#p');
var strong = document.querySelector('#strong');
var b = document.querySelector('#b');
var a = document.querySelector('#a');
var h2 = document.querySelector('#h2');
var h3 = document.querySelector('#h3');

parrafo.addEventListener('click', () => {
    cuerpo.value += "<p></p>";
});

strong.addEventListener('click', () => {
    cuerpo.value += "<strong></strong>";
});

b.addEventListener('click', () => {
    cuerpo.value += "<b></b>";
});

a.addEventListener('click', () => {
    cuerpo.value += "<a href='' class='blue-text'></a>";
});

h2.addEventListener('click', () => {
    cuerpo.value += "<h2 class='flow-text'></h2>";
});

h3.addEventListener('click', () => {
    cuerpo.value += "<h3 class'flow-text'></h3>";
});

Espero que hayan entendido lo que quiero hacer

5
  • ¿Tienes un ejemplo gráfico como un dibujo donde se vea exactamente lo que quieres lograr? Commented el 28 nov. 2020 a las 2:04
  • 2
    creo que te queres referir al cursor cierto? Commented el 28 nov. 2020 a las 2:07
  • capaz te sirva esta respuesta es.stackoverflow.com/questions/61422/… Commented el 28 nov. 2020 a las 2:13
  • @facuaquino La respuesta si responde a mi pregunta, el problema es que es Jquery y yo estoy trabajando con JavaScript puro, pero en realidad es eso mismo lo que quiero hacer Commented el 28 nov. 2020 a las 3:20
  • Esta pregunta si merece un ejemplo en imagen de lo que queres...
    – gbianchi
    Commented el 28 nov. 2020 a las 18:29

2 respuestas 2

1

investigando encontre este codigo

    h2.addEventListener('click', () => {
       var endPos = cuerpo.selectionEnd; //obtiene la posicion del cursor
       var del=cuerpo.value.substring(endPos,cuerpo.value.length); //obtiene valor desde la posicion del cursor asta el final del valor
       cuerpo.value=cuerpo.value.replace(del,""); //elimina el valor obtenido en del
       cuerpo.value+="<h2>"; //añade un h2
       var po=cuerpo.value.length; //obtiene la nueva posicion a poner del cursor ( la posicion anteniro en este caso+ 4 )
       cuerpo.value+="</h2>"; //añade del finas del h2
       cuerpo.value+=del; //añade el valor eliminado
       cuerpo.focus(); //poner en focus el input
       cuerpo.setSelectionRange(po,po); //pone el cursor dentro de h2
     }
    });

haci pones el h2 donde esta la posicion del cursor y pones en cursor dentro del h2

Si nesecitas otra cosa dime.

5
  • 1
    Hola amigo, no me funciona Commented el 28 nov. 2020 a las 18:18
  • la verdad es algo estraño porque estoy haciendo pruebas y me funciona correctamente. podrias decirme el error que te dice en la consola
    – gabriel
    Commented el 28 nov. 2020 a las 18:22
  • 1
    Perdor se me olvido que cuando le das click al boton quita el focus lo unico que haras es que antes del cuerpo.setSelectionRange(po,po); pongas cuerpo.focus() acabo de editar la respuesta por cuarquier duda
    – gabriel
    Commented el 28 nov. 2020 a las 18:24
  • Recuerda evitar agregar multiples respuestas, puedes editarla , revisa Cómo responder, saludos.
    – Jorgesys
    Commented el 28 nov. 2020 a las 19:54
  • Perfecto mi querido amigo, ahora si que ha funcionado a la perfección. NOTA: tu código tiene un error en la pregunta que debes de editar, porque le hace falta el cierre de la función }); Gracias por solucionar mi pregunta. Commented el 28 nov. 2020 a las 21:47
0

la rayita que parpadea se llama cursor.

no puedo hacer que se ponga en medio del cursor pero si puedo hacer que el cursor se ponga en medio. Y se podria hacer de esta manera

ejemplo con el h2

h2.addEventListener('click', () => {

 cuerpo.value+= "<h2 class='flow-text'>"; 
 var le=cuerpo.value.length;
 cuerpo.focus();
 cuerpo.value+="</h2>";
 cuerpo.setSelectionRange(le,le);
 });

(Me pusiste a investigar durante media hora) =)

1
  • Hola Gabriel, de ante mano te doy las gracias por el tiempo invertido par hacer esta investigación y lograr darme un respuesta. Aunque esta muy bien tu comentario en realidad no es eso lo que ando buscando aunque si se parecen. Lo que yo busco es que la etiqueta generada por el texto se quede donde esta el cursor, no que se coloque al final del cursor si no en la misma posición donde se encontraba el cursor. Muchas gracias por decirme que se llamaba cursor y no rayita que parpadea jajaj Commented el 28 nov. 2020 a las 3:11

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.