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>

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

Answer 1

以编程方式触发keyup；

JAVASCRIPT ：

在元素上调用onkeyup()。
创建一个新的keyup事件，并使用元素进行分派。注意：此处的源不支持IE。有关跨浏览器的支持，请参见this answer。此外，createEvent也已弃用（MDN Docs供参考）。

JQUERY ：

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

仅当输入模糊according to the 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>

Answer 2

要修复您的JSFiddle，请更新以下代码：

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

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

function add() {
  var sim1=document.getElementById("sim1").value;
  document.getElementById("box1").value = sim1;
  elem.onkeyup();
  triggerKeyUpEvent()
}

通过将行elem.dispatchEvent(e)替换为box1.dispatchEvent(e)

还有elem.onkeyup()和box1.onkeyup()行

最后，似乎您不需要调用triggerKeyUpEvent，因为当我删除它时，它仍然可以工作。

Here's the udpated JSFiddle

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

2 个答案: