0
157
VistasObtenga el valor de div para insertar en textarea js
Tengo un div que se comporta como un área de texto donde puedo insertar texto. Quiero duplicar el valor como usuario que escribe en este div, a una segunda área de texto para formatearlo y enviarlo a la base de datos en consecuencia. Sin embargo, parece que tengo problemas para tomar el valor de div. Funcionó sin problemas ya que tenía un área de texto normal. Aquí usé .text() en lugar de .val() pero no agrega br. Se supone que debe agregar br cuando el usuario comienza una nueva línea.
https://jsfiddle.net/u7mh431k/
$('#fake_textarea').keyup(function(){ var val = $('#fake_textarea').text(); val = val.replace(/\n/g, '<br />\n') $('#second').val(val); }); .textbox { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 200px; min-height: 50px; } textarea { width: 200px; height: 50px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="textbox" id="fake_textarea" contenteditable></div> <textarea type="text" id="second"></textarea>2 Respuestas
Responde la pregunta0
Al usar contenteditable , el elemento secundario se crea en el elemento html, por lo que debe analizarlo y cambiarlo a texto. La propiedad adecuada en este momento es textContent .
$('#fake_textarea').on('input', function(){ var val = $('#fake_textarea') .contents() .map((_,el)=> el.textContent + '<br/>\n') .toArray() .join(''); $('#second').val(val); });0
Fácil de usar vainilla JS.
El texto que ingresa en su div se envuelve internamente en elementos sub- div . Simplemente conecte el contenido de texto de esos textContent con un carácter de nueva línea y textarea al contenido de texto del área de textContent .
fake_textarea.addEventListener('input', (e) => { second.textContent = [...fake_textarea.querySelectorAll('div:not(.textbox)')].map(e => e.textContent).join('\n') }) .textbox { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 200px; min-height: 50px; } textarea { width: 200px; height: 50px; } <div class="textbox" id="fake_textarea" contenteditable></div> <textarea type="text" id="second"></textarea>