0

Lo que quiero hacer es que cuando se le dé click a un elemento se haga editable y si se le vuelve a dar click ya no sea editable, pero si se activa el cursor para añadir texto que no se vuelva no editable, tengo esto:

Html:

<div class="element"></div>

Js:

const element = document.getElementsByClassName("element")[0];
element.addEventListener("click", on_click);
function on_click(){
    if(element.contentEditable=="true"){
        element.contentEditable="false";
        return;
    }
    element.contentEditable="true";
}

Lo que pasa esque si le doy click automáticamente no puedo escribir en el y cuando le doy click en el elemento para poder escribir ya se me vuelve ineditable, lo que quiero es detectar si el cursor de texto está activado, y si esta no se vuelva ineditable. ¿existe alguna función para detectar cuando se activa el cursor del texto? Muchas gracias!

1 respuesta 1

1

para hacerme la vida sencilla lo que yo haría sería usar ondblclick (on double click) en vez de onclick y solo por mejor experiencia de usuario agrego el borde cuando sea editable

function makeEditable(x) {
    const thisElem = document.getElementById(x); 
  if (thisElem.contentEditable == 'true') {
    thisElem.contentEditable = 'false';
    thisElem.style.border = 'none'
  } else {
    thisElem.contentEditable = 'true';
    thisElem.style.border = '1px solid #aaa'
  } 
}
.not-selectable {
  user-select: none;
}
<div id="div1" class="not-selectable" ondblclick="makeEditable(this.id)">Lorem ipsum dolor sit amet.</div>
<div id="div2" class="not-selectable" ondblclick="makeEditable(this.id)">Cum sequi enim aut perspiciatis aspernatur</div>
<div id="div3" class="not-selectable" ondblclick="makeEditable(this.id)">non distinctio temporibus a rerum</div>
<div id="div4" class="not-selectable" ondblclick="makeEditable(this.id)">aspernatur eum nihil galisum et consequuntur nemo?</div>

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.