将文件上传到文本区域后未触发更改事件答案

【问题标题】：Change event not fired after uploading a file into a textarea将文件上传到文本区域后未触发更改事件
【发布时间】：2022-11-20 07:43:09
【问题描述】：

在使用 jQuery 的 html 中，我有一个文本区域和一个输入（类型=文件）。上传文件并将内容插入文本区域后，不会触发文本区域的更改事件。为什么？

<textarea id="textarea" style="width:100%" rows=10></textarea><br>
<input type="file" accept=".txt" id="upload"><br>
<div id="text-structure">...</div>

$(document).ready(function document_loaded() {
  $("#upload").change(function() {
    var f = $('#upload')[0].files[0];
    if (!f) return;
    var r = new FileReader();
    r.onload = function(e) {
      $('#textarea').val(e.target.result);
    }
    r.readAsText(f);
  });
  $("#textarea").on('change keyup paste', function() {
    const l = $("#textarea").val().length;
    $("#text-structure").html("Text length: " + l);    
  });
});

https://jsfiddle.net/pegast/4ndtcry8/

【问题讨论】：

标签： jquery file events input

【解决方案1】：

这是因为当您使用.val() 以编程方式设置纹理的值时，它不会触发您附加到纹理的任何事件（更改/键盘/粘贴）。您将必须手动触发这些事件之一才能使其正常工作，例如：

$('#textarea').val(e.target.result).trigger('change');

请参见下面的示例：

$(document).ready(function document_loaded() {
  $("#upload").change(function() {
    var f = $('#upload')[0].files[0];
    if (!f) return;
    var r = new FileReader();
    r.onload = function(e) {
      $('#textarea').val(e.target.result).trigger('change');
    }
    r.readAsText(f);
  });

  $("#textarea").on('change keyup paste', function() {
    const l = $("#textarea").val().length;
    $("#text-structure").html("Text length: " + l);    
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textarea" style="width:100%" rows=10></textarea><br>
<input type="file" accept=".txt" id="upload"><br>
<div id="text-structure">...</div>

【讨论】：