在HTML表单上提交Enter键而不是激活按钮
我有一个带有单个submit
输入的HTML表单,但也有各种button
元素。当用户按下'enter'键时,我希望它实际上提交表单,但是(至少在Chrome 15中),我发现它触发了第一个button
(因为之前发生的HTML比我猜)。在HTML表单上提交Enter键而不是激活按钮
我知道一般情况下,您不能强制浏览器支持特定的输入,但我真的认为他们会倾向于使用submit
而不是button
元素。我可以对HTML做一些小的调整来完成这项工作,或者我将不得不采用某种Javascript方法吗?
这里是HTML的一个粗略的样机:
<form action="form.php" method="POST">
<input type="text" name="field1"/>
<button onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>
</form>
您可以使用jQuery:
$(function() {
$("form input").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('button[type=submit] .default').click();
return false;
} else {
return true;
}
});
});
因为这是被接受的答案:向下滚动一个非常简单的纯HTML解决方案。 – jlh
试试这个,如果输入键被按下,你可以捕捉它像这样的例子,我开发有一天的答案html button specify selected,看看这是否有帮助。
指定表单名称,例如yourFormName
,那么您应该能够提交表单而不必关注表单。
document.onkeypress = keyPress;
function keyPress(e){
var x = e || window.event;
var key = (x.keyCode || x.which);
if(key == 13 || key == 3){
// myFunc1();
document.yourFormName.submit();
}
}
由于只有一个(或与此解决方案可能连一个也没有)提交按钮,这里是基于jQuery的解决方案,将在同一页上的多个形式的工作...
<script type="text/javascript">
$(document).ready(function() {
var makeAllFormSubmitOnEnter = function() {
$('form input, form select').live('keypress', function (e) {
if (e.which && e.which == 13) {
$(this).parents('form').submit();
return false;
} else {
return true;
}
});
};
makeAllFormSubmitOnEnter();
});
</script>
您不需要JavaScript来选择默认提交按钮或输入。您只需要将其标记为type="submit"
,其他按钮标记为type="button"
。在你的例子中:
<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>
这实际上在某些浏览器中无法正常工作。我今天刚刚遇到了这个问题,认为type =“submit”会使其成为默认值,但它不适用于Chrome或Safari。 –
它适用于Chrome和Safari。它一定是别的东西。 –
在额外按钮上设置type =“button”AND设置type =“submit”是造成差异的原因。 – Alex
我只是在Chrome和Firefox和IE10中给了这个旋风。如上所述 - 确保您已标记type =“button”,“reset”,“submit”等,以确保它正确级联并选择正确的按钮。
或许还设置他们都具有相同的形式(即所有为工作对我来说)
我只是打了一个问题与此有关。煤矿是一个脱落的改变input
为button
,我想有一个写的不好/>
标签终结者:
所以我不得不:
<button name="submit_login" type="submit" class="login" />Login</button>
而且刚才它修改为:
<button name="submit_login" type="submit" class="login">Login</button>
现在就像一个魅力,总是恼人的小东西... HTH
可能是最快的解决方案 –
$("form#submit input").on('keypress',function(event) {
event.preventDefault();
if (event.which === 13) {
$('button.submit').trigger('click');
}
});
检查这个问题:http:// *。com/a/925387/1031900 –
@OfirFarchy我想我觉得这个问题不同的是,只有一个提交,其他的都是按钮。 – andygeers
那么,如果你不反对使用JS和jQuery检查我的&大卫的答案 –