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

Question

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

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

问题是因为您使用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>

Answer 2

要更改文本区域的内容，您应该使用.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>