从Java脚本设置时，Text Area不会触发值更改事件

Question

我正在尝试在Text Script上添加一些由Java Script预先填充的CSS类。但有些人甚至在触发触发（输入）事件后，没有任何值可以验证并设置我的css类。

代码继续进入Value not set mode。当我尝试打印该值时，它是空的。如何听取价值并在那里验证？

JS：

    $(document).ready(function() {
          document.getElementById('text_area').value = 'This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.';
          $('textarea').trigger('input');

<!-- checking if there is autofill set and checking if there is value in autofill -->

    $('[autofill]').each(function(){
                alert($(this).attr('autofill'), this);
                if($(this).attr('autofill') == "on"){
                    var value = $(this).val() ? true : false;
                    if (value) {
                        alert("value set");
                    } else {
                        alert("value not set");
                    }
                }
            });

HTML：

 <div class="form-control-mds label-up five twelve--tablet twelve-phone push-top-2">
      <textarea id="text_area" data-autoresize class="input-control   auto-expand" name="text_area" required autofill="on"></textarea>
      <label for="text_area" class="label-control">Text Area</label>
    </div>

JSBIN链接

https://jsbin.com/jafovog/edit?html,js

Answer 1

将值放在textarea元素中，而不是：

document.getElementById('text_area').value = 'This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.';

这样做：

document.getElementById('text_area').innerHTML= 'This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.';

要检索textarea的值，而不是：

var value = $(this).val() ? true : false;

这样做：

var value = $(this).html() ? true : false;

修改

我有 edited your JSBIN demo 。这是代码：

<强> JS：

$(document).ready(function() {

      document.getElementById('email').value = 'bala@mindlens.com.sg';
      document.getElementById('text_area1').innerHTML = '1234This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.This can be a long text and it is not auto expanding? it shoudl auto expand.';

      $('textarea').trigger('input');
      $('textfield').trigger('change');


      $('[autofill]').each(function() {
        console.log($(this).attr('autofill'), this);
        if ($(this).attr('autofill') == "on") {
          var value = ($(this).html() !== "") ? true : false;
          alert("value = "+$(this).html());
          console.log("value", value);
          if (value) {
            console.log("value set");alert("value set");
          } else {
            console.log("value not set");alert("value not set");
          }
        }
  });
});