通过文件上传向textarea插入内容后change事件未触发的原因

为什么change事件没触发？ #

textarea的change事件仅在用户手动修改内容并让元素失去焦点时才会触发。你通过jQuery的val()方法直接修改textarea的值属于程序式修改，不属于用户交互操作，浏览器不会自动触发change事件；同理你绑定的keyup、paste这类依赖用户交互的事件，也不会因程序修改内容而触发。

解决办法 #

有两种简单的处理方式：

方式一：手动触发change事件 #

在给textarea赋值后，调用trigger('change')手动触发绑定的事件处理函数，就能同步更新文本长度显示。

修改后的JS代码：

$(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) {
      // 赋值后手动触发change事件
      $('#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);    
  });
});

方式二：改用input事件（更灵活） #

input事件会在内容变化时立即触发（包括用户输入、粘贴等操作），同样需要手动触发它来响应程序式修改。调整事件绑定并手动触发：

$(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('input');
    }
    r.readAsText(f);
  });
  $("#textarea").on('input keyup paste', function() {
    const l = $("#textarea").val().length;
    $("#text-structure").html("Text length: " + l);    
  });
});

核心逻辑都是：程序修改内容后，手动触发对应的事件，让绑定的处理函数执行，从而更新页面显示。

内容的提问来源于stack exchange，提问作者Peter Gast