javascript - 输入值更改后从脚本触发 onKeyUp

Question

我有一些输入字段，它们使用 onKeyUp="script" 在输入内容时返回数据。

作为一种快捷方式，我希望能够在从另一个位置输入数据并触发脚本时向其中一个字段添加值。

我可以使用 document.getElementById("myID").value = MyValue; 将特定值添加到输入框，或使用 .addEventListener(); 来观察另一个输入字段。 这部分效果很好。

但是，我无法触发与 onKeyUp 等效的任何内容，这将在以下情况下发生: 1. 当输入字段处于焦点状态时按下/释放键。 2. 在脚本添加值后，您将焦点置于输入并释放按键。 3. 脚本添加值后，通过 [TAB] 输入输入字段。

添加 .keyup(); 或 .keypress(); 没有效果。 我已经能够使用 .focus(); 来聚焦然后更改输入，但这与按 [TAB] 没有相同的效果

即使数据不是手动输入的，我该如何触发该字段的 onKeyUp ？

其他信息

这部分有效...

<input type="text" id="box1" onKeyUp="script1();">
<div id="result1" "> (script places result here) </div>

从其他位置增加值(value) - 选项 1

<input type="text" id="Test1">
<button type="button" onclick="TestScript()"> TEST</button>

<script type='text/javascript'>
  function TestScript() {
    var test1=document.getElementById("Test1").value;
    document.getElementById("box1").value = test1;
    document.getElementById("box1").keyup();
    return false;
  }
</script> 

从其他位置增加值(value) - 选项 2

<script type='text/javascript'>
  window.onload = function () {
    document.getElementsByName("box2")[0].addEventListener('change', TestScript2);
    function TestScript2(){
      var test2=document.getElementById("box2").value;
      document.getElementById("box1").value = test2;
  }}
</script>

这两个选项都会将值复制到正确的位置，但我无法触发 onKeyUp 以便原始脚本意识到某些内容已更改。

非工作 fiddle 示例: https://jsfiddle.net/mj8g4xa2/4/

Answer 1

以编程方式触发keyup；

JAVASCRIPT:

1. 在元素上调用 onkeyup()。
2. 创建一个新的 keyup 事件并使用该元素调度它。 注意:此处源码不支持IE。请参阅this answer用于跨浏览器支持。另外 createEvent 已被弃用( MDN Docs 供引用)。

JQUERY:

1. $("#elem").keyup();
2. $("#elem").trigger('keyup');

更改事件仅在输入模糊时触发，according to the MDN Docs .

此外，您的控制台中应该出现Uncaught TypeError: element.keyup is not a function错误。

var elem = document.getElementById("data");

function triggerKeyUpEvent()
{
    var e = document.createEvent('HTMLEvents');
    e.initEvent("keyup",false,true);
    elem.dispatchEvent(e);
}

function perform()
{
    console.log("KeyUp");
}

function add()
{
    elem.value = String.fromCharCode(Math.random().toFixed(2)*100).repeat(5);
    elem.onkeyup();
    triggerKeyUpEvent();
}

<input id="data" onkeyup="perform()">

<button id="add" onclick="add()">Add Random Data</button>