jquery

Question

有人可以提供代码片段支持吗？有 li 项。 “更新”按钮使用定义的文本（数据文本）更新文本区域内容。文本区域有 2 个按钮，用于复制和清除文本区域内容。不起作用的是编辑文本区域中的文本时：“更新”按钮和清除按钮都不起作用。 “复制”按钮仍然有效。代码中需要更改什么？

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>

Answer 1

要更改文本区域的内容，您应该使用 .val() 而不是 .html()。试试这个

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>

Answer 2

问题是因为您使用 html() 和 empty() 来设置 textarea 的值。因为它是一个表单控件，所以您应该使用 val()。

另请注意，您使用的是原生方法和 jQuery 方法的奇怪组合。如果您已将 jQuery 加载到页面中，您也可以使用它。另请注意，您只需要一个 jQuery document.ready 处理程序；您所有的代码都可以放在其中。

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>

jquery - 编辑内容时更新和清除文本区域不起作用

jquery - Updating and clearing textarea not working when content edited

javascript

html

textarea