如何在javascript中模拟回车键按钮答案

【问题标题】：How To Simulate an Enter key Button In javascript如何在javascript中模拟回车键按钮
【发布时间】：2019-07-26 08:49:47
【问题描述】：

我最近为我的 Web 应用程序制作了一个完整的虚拟键盘，我想添加一个按钮来模拟 Enter 键。

例如，当用户在输入字段中输入内容并按下虚拟键盘上的 Enter 键时，我希望输入字段在网站上搜索他们输入的内容。

我完成了搜索部分，但我只需要在键盘上添加一个虚拟回车键。

如何创建一个模拟物理回车键按下的按钮？

更新：谢谢大家帮助我！但不幸的是，以下答案都没有解决我的问题:-(

但是我找到了解决问题的方法

我把我的输入字段放在这样的表格中

 <form> <input type = "text" placeholder = "Search The website"></input></form>

然后我在表单内的输入字段旁边添加了一个按钮，如下所示

<form> <input type = "text" placeholder = "Search The website"></input> 
<button>Search</button>
</form>

这自动解决了我的问题毕竟我没有模拟回车键。但我发现了这个简单的解决方法。我什至不需要任何 JavaScript。所以，是的，谢谢大家试图帮助我。

【问题讨论】：

jquery (or pure js) simulate enter key pressed for testing的可能重复
您的意思是您当前有一个事件侦听器，它执行if(event.key === "Enter") doSearch()?然后就做doSearch()，不需要模拟任何东西。
@Kaiido 再次阅读他的问题。他想模拟点击回车——点击时不触发事件。
@Kobe 再次阅读我的评论...
@Kaiido 他在使用虚拟键盘？所以它很可能是鼠标点击，而不是键盘点击？

标签： javascript enter simulate virtual-keyboard

【解决方案1】：

创建一个事件并从按钮的单击处理程序中触发它，如下所示：

function clickHandler () {
    var simulatedEvent = new KeyboardEvent("keypress", {keyCode: 13, which: 13});
    document.getElementById("yourSearchInput").dispatchEvent(simulatedEvent);
}

【讨论】：

感谢您帮助我。我刚刚尝试了您的代码但是我收到以下错误 RefrenceError: e is not defined
抱歉，打错了。我改变了答案。
好的，谢谢。我不再收到错误消息，但按钮现在什么也不做。它不模拟回车键：-(
你是怎么调用clickHandler的？
这是我的 HTML：

【解决方案2】：

感谢大家帮助我！但不幸的是，以下答案都没有解决我的问题:-(

但是我找到了解决问题的方法

我把我的输入字段放在这样的表格中

 <form> <input type = "text" placeholder = "Search The website"></input></form>

然后我在表单内的输入字段旁边添加了一个按钮，如下所示

<form> <input type = "text" placeholder = "Search The website"></input> 
<button>Search</button>
</form>

这自动解决了我的问题毕竟我没有模拟回车键。但我发现了这个简单的解决方法。我什至不需要任何 JavaScript。所以，是的，谢谢大家试图帮助我。

【讨论】：

【解决方案3】：

var searchfield = document.getElementById("txtSearch");
var simulatedEvent = new KeyboardEvent("keypress", { keyCode: 13, which: 13 });
var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click').
    subscribe(
        (value) => {
            console.log(searchfield.value);
            //callserachfunction(searchfield.value);
            //or
            searchfield.dispatchEvent(simulatedEvent);

        }
);

function callserachfunction(searchtext) {
    console.log(searchtext);
    //search here 
}

searchfield.addEventListener("keypress", function (e) {

    if (e.which == 13){
        console.log('search here');
        // search here 
    }
});

HTML

 <script src = "https://unpkg.com/@reactivex/rxjs@5.3.0/dist/global/Rx.js" ></script>
</head>
<body>

    <input type="text" name="add activities" id="txtSearch"  placeholder="SEARCH ">
    <button id="btnVirtualEnter">Virtual Enter</button>

希望对你有帮助

【讨论】：

这是错误的。 OP 已要求模拟单击 Enter 按钮，而不是监听实际事件。
@debugmode 感谢您尝试帮助我。但这不是我想要的。我想要的是在我的页面上有一个按钮，当按下该按钮时，它会使输入字段认为按下了物理输入键
您需要读取事件流。 RxJS 可以提供帮助。你想让我用 RXJS 给你回复吗？会更简单
哦，非常感谢您的帮助。我会试试你的答案，我会让你知道的