Cuando cualquiera de los caracteres de 'Hola' o 'Mundo' se elimina en un div contenteditable , se debe eliminar la palabra completa.
Este código a continuación funciona en la Version 102.0.5005.115 (Official Build) (64-bit) en una computadora portátil , pero no funciona en la Version 102.0.5005.5005.125 de Chrome en un teléfono móvil con Android .
Editar: descubrí que el código no funciona en el navegador Chrome del teléfono móvil porque, en el navegador del teléfono móvil, e.key no está Unidentified . En el navegador del teléfono móvil, e.key no detecta qué tecla se presionó. Tal vez el navegador del teléfono móvil no sea compatible e.key , entonces, ¿qué otra forma podría usar para determinar qué tecla se presiona en el navegador móvil?
$('#div-editor').keyup(function(e) { var $target = $(document.getSelection().anchorNode).closest(".word"); $(".word").each(function(){ if (["Delete", "Backspace"].includes(e.key)) { $target.remove(); e.preventDefault(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div contenteditable="true" id = "div-editor" > <span class="word">Hello</span> <span class="word">World</span> </div>Pruebe el siguiente fragmento de código
$('#section .word').attr("contenteditable", true); $(document).on("keyup","#section .word",function(e) { if (["Delete", "Backspace"].includes(e.key)) { $(this).remove(); e.preventDefault(); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div id="section"> <span class="word">Hello</span> <span class="word">World</span> </div> $(document).ready(function(){ $('.word').on('keyup',function(e) { if(e.key == "Backspace" || e.key == "Delete"){ $(this).remove(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div contenteditable="false" id="section"> <span contenteditable="true" class="word">Hello</span> <span contenteditable="true" class="word">World</span> </div>