Question

如何使用javascript检测textarea值何时发生变化？

将数据填入id="yyyy"，数据id="xxxx"也会发生变化，当alert中的值发生变化时，我id="xxxx"怎么办？

请不要编辑功能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

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

试试这个：

<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 2

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

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

jsfiddle

尝试这个小提琴...

Answer 3

您无需更新check()中的值，而是调用check2()并更新值。因此，请从id=xxxx

中删除onchange事件

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

＆＃13;

inaccessible

＆＃13;

Answer 4

您可以重新定义textarea元素的value属性：

<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设置为.value的{{1}} #yyyy功能

check

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

5 个答案: