Estoy tratando de crear contenteditable al deshabilitar primero su comportamiento de estilo de texto desde los atajos de teclado, como ctrl+b o ctrl+i .
Estoy usando event.preventDefault() cuando estos accesos directos se detectan en eventos keyup y keydown ; sin embargo, a veces, en raras ocasiones, me doy cuenta de que contenteditable aún ignora event.preventDefault() y se respeta el acceso directo del teclado.
¿Hay alguna manera de deshabilitar por completo estos métodos abreviados de teclado que no sean cancelar keyup y keydown ?
Mi detector de atajos estaba defectuoso y dejaba pasar el evento en ciertos casos. Parece que cancelar el evento en keydown también cancela el atajo.
He creado un jsfiddle para cualquiera que quiera probarlo: https://jsfiddle.net/mohj19bs/28/
Mañana cerraré este hilo, por si alguien más puede compartir algo interesante ya que contenteditable nunca dejó de sorprenderme.
No estoy seguro de con qué problema estás lidiando, pero esto funciona bien...
document.getElementById("test").addEventListener("keydown", e => { if(!e.ctrlKey) return; if(e.keyCode === 66 || e.keyCode === 73) { e.preventDefault(); } }); <div id="test" contenteditable>This div is editable</div>Y una sola línea para su disfrute:
document.getElementById("test").onkeydown = e => !(e.ctrlKey && (e.keyCode === 66 || e.keyCode === 73)); <div id="test" contenteditable>This div is editable</div>Aquí hay otra estrategia que puede funcionar para usted. En lugar de intentar evitar que se inserten elementos b e i , simplemente elimínelos de inmediato en keyup o en paste .
Los casos manejados son:
Y funciona recursivamente para cuidar los elementos anidados.
let forbiddenTags = ["B", "I", "STRONG"] let clean = function(e){ // Loop through all child nodes e.target.childNodes.forEach(function(item){ // recursion if there are childnodes if(item.childNodes){ clean({target:item}) } // Remove forbidden tags if(item.tagName && forbiddenTags.indexOf(item.tagName) > -1){ item.insertAdjacentHTML("afterEnd", item.innerHTML) item.remove() return } // Reset inline style if(item.style){ item.style.fontWeight = "normal" item.style.fontStyle = "normal" } }) } document.querySelector("#test").addEventListener("keyup", clean) document.querySelector("#test").addEventListener("paste", clean) div{ border: 1px solid grey; padding: 0.5em; } table{ border-collapse: collapse; } td{ border: 1px solid grey; } <div id="test" contentEditable=true>Enter text here</div> <br> Paste me in!: <div id="pasteit"> <b>bold</b> <i>italic</i> <strong>strong</strong> <span style="font-weight:bold;">inline</span> <table> <tr> <td style="font-style:italic;">Italic</td> <td style="font-weight:bold;">Bold</td> </tr> </table> </div>