我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时，进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将该按钮设置为提交按钮。并且，我只想让Enter键单击这个特定的按钮，如果它是从这个文本框中按下，没有其他。
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
当前回答
我的可重用Vanilla JS解决方案。因此，您可以根据激活的元素/文本框来更改点击哪个按钮。
<input type="text" id="message" onkeypress="enterKeyHandler(event,'sendmessage')" />
<input type="button" id="sendmessage" value="Send"/>
function enterKeyHandler(e,button) {
e = e || window.event;
if (e.key == 'Enter') {
document.getElementById(button).click();
}
}
其他回答
我已经通过添加类开发了自定义javascript来实现这个功能
例如:<button type="button" class="ctrl-p">自定义打印</button>
来看看提琴
//查找元素 Var banner = $("#banner-message") Var按钮= $("button") //添加类 按钮。(“点击”,函数(){ 如果(banner.hasClass(“alt”)) banner.removeClass(“alt”) 其他的 banner.addClass(“alt”) }) $(文档)时函数(){ 美元(文档)。On ('keydown'，函数(e) { if (e.ctrlKey) { $('[类* = " ctrl - "]:没有([data-ctrl])”)。每个(函数(idx, item) { var关键= $(项目).prop(类).substr(美元(项).prop(类).indexOf (ctrl -) + 5, 1) .toUpperCase (); 美元(项)。attr(“data-ctrl”键); 美元(项)。追加('<div class="tooltip fade top in tooltip-ctrl alter-info" role="tooltip" style="margin-top: -61px;显示:块;可见性:可见;<div class=" font - family:宋体" style=" font - family:宋体;" > < / div > < div class = " tooltip-inner " > CTRL + +键+”< / div > < / div >”) })； ｝ if (e.ctrlKey && e.which != 17) { var Key = String.fromCharCode(e.which).toLowerCase(); 如果($ (' .ctrl - ' +键)。长度== 1){ e.preventDefault (); 如果(! $ (' # divLoader ') .(":可见")) $ (' .ctrl——“+键).click (); console.log("You pressed ctrl + "+Key); ｝ ｝ })； 美元(文档)。On ('keyup'，函数(e) { 如果(e。ctrlKey) { $('[类* = " ctrl - "]”).removeAttr(“data-ctrl”); $ (" .tooltip-ctrl ") .remove (); ｝ }) })； # banner-message { 背景:# fff; border - radius: 4 px; 填充:20 px; 字体大小:25 px; text-align:中心; 过渡:全部0.2秒; 保证金:0自动; 宽度:300 px; ｝ # banner-message。alt { 背景:# 0084 ff; 颜色:# fff; margin-top: 40像素; 宽度:200 px; ｝ # banner-message。Alt键{ 背景:# fff; 颜色:# 000; ｝ < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div id = " banner-message " > < p > Hello World < / p > <button class="ctrl-s" title="s">改变颜色</button><br/><br/> <span>按CTRL+S触发按钮</span>的单击事件 < / div >
——或—— 查看运行示例 https://stackoverflow.com/a/58010042/6631280
注意:在当前逻辑上，需要按Ctrl + 输入
试一试:
<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>
<script>
window.onload = function() {
document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
if (event.keyCode == 13) {
document.getElementById('btnSearch').click();
}
};
document.getElementById('btnSearch').onclick =doSomething;
}
</script>
那就把它编码进去!
<input type = "text"
id = "txtSearch"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "doSomething();"
/>
我算出来了:
<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />
<script>
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('btnSearch').click();
return false;
}
return true;
}
</script>
在jQuery中，以下代码可以工作:
$("#id_of_textbox").keyup(function(event) {
if (event.keyCode === 13) {
$("#id_of_button").click();
}
});
$（“#pw”）.keyup（function（event） { if （event.keyCode === 13） { $（“#myButton”）.click（）; } }); $（“#myButton”）.click（function（） { 警报（“按钮代码已执行。 }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> 用户名：<输入 id=“用户名” 类型=“文本”><br> 密码： <输入 id=“pw” 类型=“密码”><br> <按钮 id=“我的按钮”>提交</button>
或者在纯JavaScript中，以下代码可以工作:
document.getElementById("id_of_textbox")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("id_of_button").click();
}
});
document.getElementById（“pw”） .addEventListener（“keyup”， function（event） { event.preventDefault（）; if （event.keyCode === 13） { document.getElementById（“myButton”）.click（）; } }); 功能按钮代码（） { 警报（“按钮代码已执行。 } <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> 用户名：<输入 id=“用户名” 类型=“文本”><br> 密码： <输入 id=“pw” 类型=“密码”><br> <button id=“myButton” onclick=“buttonCode（）”>提交</button>
