时间戳

首页 > 解决方案 > 输入值更改后从脚本触发 onKeyUp

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

问题描述

我有一些输入字段用于在输入内容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>

从其他位置增加价值 - 选项 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>

从其他位置增加价值 - 选项 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以便原始脚本意识到某些东西已经改变。

非工作小提琴示例： https ://jsfiddle.net/mj8g4xa2/4/

标签： javascript

解决方案

以编程方式触发keyup；

JAVASCRIPT：

  1. 调用onkeyup()元素。
  2. 创建一个新keyup事件并使用该元素调度它。注意：这里的源码不支持IE。请参阅此答案以获得跨浏览器支持。也createEvent已弃用（MDN Docs供参考）。

查询：

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

根据 MDN Docs，仅当输入模糊时才会触发更改事件。

此外，您Uncaught TypeError: element.keyup is not a function的console.

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>

推荐阅读