如何在javascript中模拟Enter键按钮_Javascript_Enter_Simulate_Virtual Keyboard

如何在javascript中模拟Enter键按钮

javascript

如何在javascript中模拟Enter键按钮,javascript,enter,simulate,virtual-keyboard,Javascript,Enter,Simulate,Virtual Keyboard,我最近为我的web应用程序制作了一个完整的虚拟键盘，我想添加一个按钮来模拟enter键例如，当用户在输入字段中键入内容并按下虚拟键盘上的Enter键时，我希望输入字段在网站上搜索他们键入的内容我完成了搜索部分，但我所需要的只是在键盘上添加一个虚拟的回车键我怎样才能创建一个按钮来模拟实际的回车键按下更新：谢谢大家帮助我！但不幸的是，下面的答案都没有解决我的问题：-( 然而，我找到了解决这个问题的方法我把我的输入字段放在这样的表格中 <form> <input typ

我最近为我的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>

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

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

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

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

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

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

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


搜寻

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

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

 <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>

HTML

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

 <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>


虚拟进入

我希望它有助于创建事件并从按钮的单击处理程序触发事件，如下所示：

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

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

然而，我找到了解决这个问题的方法

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

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

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

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

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

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

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

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

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

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


搜寻

这就自动解决了我的问题

毕竟，我没有模拟enter键。但是我发现了这个简单的解决方法。我甚至不需要任何JavaScript。所以，是的，谢谢大家尝试帮助我。

可能重复您的意思是您当前有一个事件侦听器，它可以执行

if（event.key==“enter”）doSearch（）

？然后执行

doSearch（）

，无需模拟任何东西。@Kaido再次阅读了他的问题。他想模拟单击enter键，而不是在单击时触发事件。@Kobe再次阅读了我的评论…@Kaido他使用的是虚拟键盘？所以很可能是鼠标单击，而不是键盘单击？这是错误的。OP要求模拟单击enter键，而不是收听实际事件。@debugmode感谢您尝试帮助我。但这不是我想要的。我想要的是在我的页面上有一个按钮，当按下该按钮时，会使输入字段认为按下了物理回车键。您需要读取事件流。RxJS可以帮上忙。是否要我向您发送回答using RXJS？那太简单了。非常感谢你的帮助。我会尝试你的答案，我会让你知道的。谢谢你尝试帮助我。我刚刚尝试了你的代码，但是我得到了以下错误参考错误：e没有定义抱歉，那是一个输入错误。我更改了答案。好的，谢谢。我不再得到错误，但按钮现在没有了它没有模拟回车键：-（你如何调用clickHandler？这是我的HTML：