Estoy tratando de crear un código que funcione cuando lo colocas en la barra de búsqueda de Google, eso es imprescindible y creé un div que puedes editar, también creé un botón de reinicio que reemplaza el contenido en el div con el texto predeterminado, pero cuando trato de presionar ctrl + z no regresa, y no se como hacerlo funcionar
-No puedo deshacerme de la parte: data:text/html, porque no funcionaría en la barra de búsqueda de google -Tengo que tener todos los tipos de código en un solo documento, porque tengo que copiar y pegar todo en la barra de búsqueda de google
function reset() { div_1.innerHTML = '<p> Default text<p>'; } .div_1 { display: block; background-color: rgba(255, 0, 0, 0.5); height: 80%; position: relative; width: 60%; position-left: 100px; } <div contenteditable="true" class="div_1" id="div_1"> <p> Default text<p> </div> <button onclick="reset()">reset</button> function reset() { div_1.innerHTML = ''; //set the inner HTML to empty string } .div_1 { display: block; background-color: rgba(255, 0, 0, 0.5); height: 80%; position: relative; width: 60%; position-left: 100px; } <div contenteditable="true" class="div_1" id="div_1"> <p> Default text<p> </div> <button onclick="reset()">reset</button>Creo que está tratando de vaciar el formulario cuando presiona el botón de reinicio. Entonces, debe cambiar el HTML interno a una cadena vacía para poder hacer eso.
espero haber ayudado
pude encontrar una opción con el patrón memento y crear un evento para la entrada ctrl + z en el teclado
function copy(){ inp1.select(); navigator.clipboard.writeText(inp1.value); ctn.innerHTML = inp1.value; } var mementos = []; function reset() { mementos.push(document.getElementById('div_1').innerHTML); div_1.innerHTML= '<p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p>'; } document.addEventListener('keydown', function(event) { if (event.ctrlKey && event.key === 'z') { var lastMemento = mementos.pop(); div_1.innerHTML = lastMemento; } }); function undo() { var lastMemento = mementos.pop(); div_1.innerHTML = lastMemento; } input{ width:200px; height: 100%; } .div_1{ display: block; background-color:rgba(255, 0, 0, 0.5); height:400px; position: relative; width: 400px; padding-left: 2px; } button{ position: relative; } .ctn { display: inline; background-color: red; } <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Notes</title> </head> <body> <link rel="stylesheet" href="syles.css"> <input placeholder="(000)-000-0000" maxlength="10" id="inp1"> <button onclick="reset()">reset</button> <button onclick="copy()">copy</button> <button onclick="undo()">Undo</button> <div contenteditable="true"class="div_1" id="div_1"> <p>caller name: </p><p>reason for the call:</p><p>CTN: <div class="ctn" id="ctn"></p><p><br></p><p></p> </div> </body> </html>