Vista previa en vivo de HTML / CSS desde una etiqueta div y no una etiqueta de área de texto

Quiero crear una vista previa en vivo de HTML / CSS en una página.

Pero el código no se dará usando textareas . El código se va a arreglar en la página ( div ).

Quiero que el usuario pueda modificar el código y eso se reflejará en el cuadro de vista previa en vivo. He creado la página donde puede cambiar partes del texto del guión (para aficionados). Puede obtener una vista previa de esto aquí: http://apolosiskos.co.uk/HTML-CSS-EDITOR/index3.html

01) La vista previa en vivo no funciona si reemplazo el área de textarea con un div .

02) Incluso si uso las áreas de texto, la vista previa en vivo no funciona porque en mi secuencia de comandos HTML estoy usando el code y las tags xmp .

-> Fragmento que funciona con un área de texto pero no con un div:

 var wpcomment = document.getElementById('WPComment'); wpcomment.blur = wpcomment.onkeypress = function(){ document.getElementById('prevCom').innerHTML = this.value; } 
 #prevCom { background:#124; color:#fff; min-width:20px; min-height:50px; font-size:25pt; } 
  

sin éxito ¿Hay algún otro método addEventListener () con el que pueda reemplazar la clave?

Sí, borroso

Si desea agregar eventos de selección en un elemento

, puede hacer lo siguiente:

En primer lugar, debe establecer el atributo tabindex:

 

Luego, (2) Vincular a la combinación de teclas:

  $('#mydiv').bind('keydown', function(event) { //console.log(event.keyCode); }); 

Si desea que su div esté “enfocado” desde el principio:

 $(function() { $('#mydiv').focus(); }); 

Debe colocar su código de vista previa dentro de una función, luego simplemente puede llamarlo una vez que el documento se haya cargado.

https://jsfiddle.net/michaelvinall/4053oL1x/1/

El problema por separado de su vista previa solo cuando presiona la tecla Intro, se debe a la siguiente instrucción if :

 if(e.which == 13 && $(this).val().length > 0) 

El e.which == 13 dentro de su if especifica que el código dentro del bloque solo debería ejecutarse si la tecla presionada por el usuario era la tecla enter (código 13). Al eliminar esta parte de cada instrucción if , cualquier tecla presionada ejecutará el código dentro del bloque:

 if($(this).val().length > 0) 

Su función es llamar cuando se activa la tecla, pero no después de cargar la página.

Debe hacerlo: defina la función para llamarlos cuando se disparen 2 eventos diferentes.

 $(function() { function GetHtml(){ var html = $('.html').val(); return html; } function GetCss(){ var Css = $('.css').val(); return Css; } var previewRendering = function(){ console.log('kikou'); var targetp = $('#previewTarget')[0].contentWindow.document; targetp.open(); targetp.close(); var html = GetHtml(); var css = GetCss(); $('body',targetp).append(html); $('head', targetp).append(''); }; $('.innerbox').on("keyup",function(){ previewRendering(); }); $(document).ready(function() { previewRendering(); }); }); 

Este código no puede funcionar porque load event solo es compatible con esta lista de tags HTML: body, frame, iframe, img, input type = “image”, link, script, style

 $('.innerbox').load(function()