¿Alguien puede ayudar con el fragmento de código? Hay artículos li. El botón "actualizar" actualiza el contenido del área de texto con texto definido (texto de datos). El área de texto tiene 2 botones que copian y borran el contenido del área de texto. Lo que no funciona es cuando se edita el texto en el área de texto: Tampoco funcionan los botones de "actualizar" ni el botón de borrar. El botón "copiar" todavía funciona. ¿Qué hay que cambiar en el código?
jQuery(function ($) { $('.area_update').click(function () { var my_var = $(this).data('text'); $('#area').html(my_var); document.querySelector("textarea").select(); document.execCommand('copy'); }); }); jQuery(function ($) { $('#clear_area').click(function () { $('#area').empty(); }); }); document.querySelector("#copy-btn").onclick = function () { document.querySelector("textarea").select(); document.execCommand('copy'); }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>aaa<input type="button" class="area_update" data-text="zzz" value="update" /></li> <li>bbb<input type="button" class="area_update" data-text="yyy" value="update" /></li> <li>ccc<input type="button" class="area_update" data-text="xxx" value="update" /></li> </ul> <textarea id='area' name='editor'>test</textarea> <button id="copy-btn">Copy</button> <button id="clear_area">Clear</button>Para cambiar el contenido del área de texto, debe usar .val() en lugar de .html() . Prueba esto
jQuery(function ($) { $('.area_update').click(function () { var my_var = $(this).data('text'); $('#area').val(my_var); document.querySelector("textarea").select(); document.execCommand('copy'); }); }); jQuery(function ($) { $('#clear_area').click(function () { $('#area').val(''); }); }); document.querySelector("#copy-btn").onclick = function () { document.querySelector("textarea").select(); document.execCommand('copy'); }; <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>aaa<input type="button" class="area_update" data-text="zzz" value="update" /></li> <li>bbb<input type="button" class="area_update" data-text="yyy" value="update" /></li> <li>ccc<input type="button" class="area_update" data-text="xxx" value="update" /></li> </ul> <textarea id='area' name='editor'>test</textarea> <button id="copy-btn">Copy</button> <button id="clear_area">Clear</button>El problema se debe a que está utilizando html() y empty() para establecer el valor del área de textarea . Como es un control de formulario, debe usar val() en su lugar.
También tenga en cuenta que está utilizando una combinación extraña de métodos nativos y jQuery. Si ha cargado jQuery en la página, también puede usarlo. También tenga en cuenta que solo necesita un único controlador jQuery document.ready; todo su código puede ir dentro de eso.
jQuery($ => { let $textarea = $('#area'); $('.area_update').on('click', e => { var my_var = $(e.currentTarget).data('text'); $textarea.val(my_var).select(); document.execCommand('copy'); // are you sure you want to copy the value in the 'update' command? }); $('#clear_area').on('click', () => { $textarea.val(''); }); $('#copy-btn').on('click', () => { $textarea.select(); document.execCommand('copy'); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li>aaa <input type="button" class="area_update" data-text="zzz" value="update" /></li> <li>bbb <input type="button" class="area_update" data-text="yyy" value="update" /></li> <li>ccc <input type="button" class="area_update" data-text="xxx" value="update" /></li> </ul> <textarea id="area" name="editor">test</textarea> <button id="copy-btn">Copy</button> <button id="clear_area">Clear</button>