以编程方式在文本输入上触发 keyup 事件答案

【问题标题】：Triggering keyup event on a text input programmatically以编程方式在文本输入上触发 keyup 事件
【发布时间】：2018-10-13 11:52:52
【问题描述】：

为了演示我想要做什么，我使用了来自 W3schools 的示例codepen。

我有一个带有 keyup 事件侦听器的文本框，您输入的每个字符都会优化您的搜索。我想使用它的 value 属性用文本填充文本框，然后触发 keyup 事件，以便keyup 事件监听器运行。但我无法做到这一点。我想使用核心 JS，但为了测试它，我也用 jQuery 尝试过，但没有运气。

$('#mySearch').val("j"); 
$('#mySearch').keyup();

【问题讨论】：

你到目前为止尝试过的，在你的问题中添加代码

标签： javascript jquery jquery-events onkeyup

【解决方案1】：

正如 Math 已经说过的，您可以创建一个按按键（或在您的情况下释放）运行的函数。该函数应该细化搜索。我会为此推荐 JS，但如果你想使用 jQuery，那么你可以这样做：

$("#mySearch").on("keyup", function()
{
    // Refine search here
});

或者，您也可以只使用.keyup() 函数：

$("#mySearch").keyup(function()
{
    // Refine search here
});

希望对你有帮助

【讨论】：

【解决方案2】：

您可以调用分配给它的函数，而不是尝试以编程方式触发 keyup 事件。所以在核心 JS 中你会有：

在 HTML 中：

<input id="mySearch" type="text" onkeyup="myFunction()">

在 JS 中，您创建函数 myFunction 女巫将优化您的搜索。当您想更改输入的值时，您可以在更改后调用函数：

function myfunction() {
  //refine search code
}


//change the value of the input 
document.getElementById('mySearch').value = "j";
myFunction();

【讨论】：

【解决方案3】：

如讨论here

您可以在 IE 8 或更低版本上使用 fireEvent，在大多数其他浏览器上使用 W3C 的 dispatchEvent。要创建要触发的事件，您可以根据浏览器使用 createEvent 或 createEventObject。

这是一段不言自明的代码（来自原型），它触发元素上可用的事件数据：

var event; // The custom event that will be created
if(document.createEvent){
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
    event.eventName = "dataavailable";
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventName = "dataavailable";
    event.eventType = "dataavailable";
    element.fireEvent("on" + event.eventType, event);
}

【讨论】：