Question

如果在textarea中的值发生变化时如何调用javascript函数？

将数据填充到textarea id="yyyy"时，textarea id="xxxx"也会更改值。这个功能很好用。

当textarea id="xxxx"更改值时，我想调用函数check2，我该怎么办？

请不要更改功能check和id="yyyy"

中的代码

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

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

Answer 1

在函数检查中只创建一个函数，以查看textarea所谓的函数，然后为每个函数编写单独的代码。

这只是我用手机写的sudo代码，因此可能会有一些小错误需要修复。

var userEdit = true;

function(ta) {
  if (ta.Id == 'xxx')
  {
     // Do code for xxx text area
     userEdit = false;
     // update yyy via code
     userEdit = true;
  } else if (ta.Id == 'yyy' && userEdit) {
    // Do code for yyy text area change only when a user edits it
  } else if (ta.Id == 'yyy' && !userEdit) {
    // Do code for yyy text area change only when your code edits it
  }
}

您也可以使用onblur而不是onchange，当用户将焦点更改为对象时，会调用onblur。就像他们输入一个输入然后选项卡或点击另一个输入或按钮后，它会被解雇。

Answer 2

更新了小提琴：https://jsfiddle.net/9b6h897d/6/

当您更改check中的值时，请调用check2方法，如：

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

如果您想跟踪用户更改，我认为最好使用oninput。

如果您不想更改check()的内容，则必须在oninput中调用这两项功能：

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

新小提琴：https://jsfiddle.net/9b6h897d/9/

希望这会对你有所帮助。

Answer 3

<textarea>的标准事件是keypress，keydown或keyup。要做你想做的事，你必须在其中一个函数中触发onchange。这在第一个名为check的函数中最有意义。

document.getElementById("textarea2").addEventListener("change", function(event) {
  console.log("Textarea two was changed.");
});

function check(element) {
  var textarea2 = document.getElementById("textarea2"),
    event = new Event('change');
  textarea2.value = element.value;
  textarea2.dispatchEvent(event);
};

<textarea id="textarea1" onkeyup="check(this);"></textarea>
<textarea id="textarea2" onkeyup="check(this);"></textarea>

如果在textarea中的值发生变化时如何调用javascript函数？

3 个答案: