如何使用 javascript 检测 textarea 值何时更改？

Question

如何使用 javascript 检测文本区域值何时发生变化？

将数据填入id="yyyy"，数据id="xxxx"也会发生变化，id="xxxx"的值发生变化时，如何alert？

请不要编辑函数 check 和 id="yyyy"

中的代码

<textarea id="yyyy" onkeyup="check(this.value)"></textarea>
<textarea id="xxxx" onchange="check2(this.value)" readonly></textarea>

<script>
function check(value){
    document.getElementById("xxxx").value = value;
}
function check2(value){
    alert(value);
}
</script>

Answer 1

你可以在其他函数中调用函数

<script>
function check(value){
    document.getElementById("xxxx").value = value;
    check2(value);
}
function check2(value){
    alert(value);
}

jsfiddle

试试这个 fiddle...

Answer 2

不在更改事件上调用第一个函数中的第二个函数

试试这个：

<textarea id="yyyy" onkeyup="check(this.value)"></textarea>
<textarea id="xxxx" readonly></textarea>

<script>
function check(value){
    document.getElementById("xxxx").value = value;
     check2(value);//call the check2 here
}
function check2(value){
    alert(value);
}
</script>

或者触发onchange事件

<script>
function check(value){
    document.getElementById("xxxx").value = value;
     document.getElementById("xxxx").onchange();
}
function check2(value){
    alert(value);
}
</script>

或将其他活动添加到您的 xxx

<textarea id="yyyy" onkeyup="check(this.value)" oninput="check2(this.value)"></textarea>
<textarea id="xxxx" readonly></textarea>

<script>
function check(value){
    document.getElementById("xxxx").value = value;
}
function check2(value){
    alert(value);
}
</script>

Answer 3

您不需要更新 check() 中的值，而是调用 check2() 并更新该值。所以从 id=xxxx

中删除 onchange 事件

编辑：按如下方式覆盖 keyup 并从该事件处理程序调用 inaccessible 函数

<textarea id="yyyy" onkeyup="check(this.value)"></textarea>
<textarea id="xxxx" readonly></textarea>

<script>
  function check(value) {
    //your unaccessible function
  }

  document.getElementById("yyyy").addEventListener('keyup', function() {
    document.getElementById("xxxx").value = this.value;
    alert(this.value);
    check(this.value)
  });
</script>

Answer 4

您可以重新定义文本区域元素的值属性：

<html>
    <head>
        <script>
            //Is not changable according to OP
            function check(value){
                document.getElementById('xxxx').value = value
            };

            //Is not changable according to OP
            function check2(value){
                alert(value)
            };

            window.onload = function(){
                var tE = document.querySelector('#xxxx'); //The readonly textarea

                //Redefine the value property for the textarea
                tE._value = tE.value;
                Object.defineProperty(tE, 'value', {
                    get: function(){return this._value},
                    set: function(v){
                        console.log(this.id, ' - the value changed to: ' + v)
                        this._value = v;
                        this.setAttribute('value', v) //Setting the attribute (browser stuff);
                        check2(v)
                    }
                })
            }
        </script>
    </head>

    <body>
        <textarea id = 'yyyy' onkeyup = 'check(this.value)'></textarea>
        <textarea id = 'xxxx' onchange = 'check2(this.value)' readonly></textarea>
    </body>
</html>

console.log(): https://jsfiddle.net/mu7o1sxq/

警报（）： https://jsfiddle.net/mu7o1sxq/2/

Answer 5

您可以使用 MutationObserver 并将配置设置为 attributes:true，将 #xxxx .dataset 设置为 #yyyy 的 .value at [=17] =]函数

<textarea id="yyyy" onkeyup="check(this.value); document.getElementById('xxxx').dataset.value = this.value">
</textarea>
<textarea id="xxxx" data-value="" readonly></textarea>

<script>

  var x = document.getElementById("xxxx");

  function check(value) {
    document.getElementById("xxxx").value = value;
  }

  function check2(value) {
    alert(value);
  }

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(check2.bind(x, x.value))
  });

  observer.observe(x, {
    attributes: true
  });

</script>

如何使用 javascript 检测 textarea 值何时更改？

How can I detect when a textarea value changes using javascript?

javascript

jquery

alert