0
147
ViewsLa etiqueta Span no trata el botón Enter presionado como una nueva línea cuando se devuelve
Tengo una etiqueta de span personalizada con la función de área de textarea en la que espero ingresar texto de varias líneas.
.input, .textarea { border: 1px solid #ccc; font-family: inherit; font-size: inherit; padding: 5px 50px; } .textarea { display: block; width: 1000px; overflow: hidden; resize: none; min-height: 200px; line-height: 20px; white-space: pre-wrap; } .textarea[contenteditable]:empty::before { content: "Mail Body Template"; color: gray; } <p><span id="mail_body_template" oninput="generate(this.value)" class="textarea" role="textbox" contenteditable></span></p> Sin embargo, cuando textarea el valor de lectura del área de texto, parece que no crea nuevas líneas al presionar Enter , pero solo puede hacerlo con Shift+Enter .
Traté de agregar un oyente onpresskey en el span para captar el Enter y crear una nueva línea, pero nunca funciona.
$(document).ready(function() { $('#mail_body_template').on('keypress',function(e) { if(e.which == 13) { $('#mail_body_template').val($('#mail_body_template').val() + "\r\n"); } }); 
En última instancia, quiero poder dejar que el span trate a Enter como una nueva línea igual que con Shift+Enter .
¿Hay una manera de hacer eso?
2 answers
Answer question0
el contenido de un contentEditable es HTML. usar .val() o .value no devuelve el contenido del lapso.
No es una línea de consola. No puede usar \r o \n para forzar un salto de línea.
Sin embargo, puede insertar una etiqueta <br> y esto debería permitir el salto de línea.
para acceder al valor, debe usar innerHTML.
a su código le falta la función de generación para obtener más información sobre dónde podría estar ubicado el error. (El hecho de que vincule un evento de pulsación de tecla / Keydown en el lapso también podría desencadenar un comportamiento extraño que tal vez no podamos reproducir.
function generate(myVal){ console.log("this.value : "+myVal) console.log("jqueryVal : "+$("#mail_body_template").val()); console.log("innerHtml : "+document.getElementById("mail_body_template").innerHTML); console.log("jqueryHtml : "+$("#mail_body_template").html()); console.log("plainText : "+$("#mail_body_template").text()); }https://jsfiddle.net/kezqs7tv/5/
Aquí hay un fragmento js.fiddle que muestra lo que quiero decir.
0
Creo que el problema es this.value en su función de generate de argumentos, porque .value es para una entrada, no para un contenido editable. Debe usar .innerText o .innerHTML
function generate(value) { console.log(value) } <p><span id="mail_body_template" oninput="generate(this.innerHTML)" class="textarea" role="textbox" contenteditable></span></p>