Question

为演示我想做的事，我使用codepen中W3schools的示例。

我有一个带有keyup事件监听器的文本框，输入的每个字符都会优化搜索。我想使用文本框的value属性将文本填充为文本框，然后触发keyup事件，以便keyup事件侦听器运行。但是我什么也做不了。我想使用核心JS，但要进行测试，我也尝试使用jQuery，但没有运气。

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

Answer 1

如Math所述，您可以创建一个按按键运行的函数（或根据情况释放）。该功能应优化搜索。我会为此推荐JS，但是如果您想使用jQuery，则可以执行以下操作：

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

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

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

希望这会有所帮助

Answer 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();

Answer 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);
}

JavaScript-以编程方式触发文本输入上的keyup事件

3 个答案: