我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时，进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将该按钮设置为提交按钮。并且，我只想让Enter键单击这个特定的按钮，如果它是从这个文本框中按下，没有其他。
<input type="text" id="txtSearch" />
<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>
其他回答
在Angular2:
(keyup.enter)="doSomething()"
如果您不希望按钮中有一些视觉反馈，那么不引用按钮而是直接调用控制器是一个很好的设计。
另外，id也不需要——这是NG2分离视图和模型的另一种方式。
这个onchange尝试很接近，但相对于浏览器(在Safari 4.0.5和Firefox 3.6.3上)，行为不佳，所以最终，我不会推荐它。
<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
我已经通过添加类开发了自定义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 + 输入
对于那些可能喜欢简洁和现代js方法的人。
input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});
其中input是包含input元素的变量。
这在情况下，你也想拨号进入按钮从发布到服务器和执行Js脚本。
<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
{document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
