У меня есть HTML-форма с единственным входом submit, но также и с различными элементами button. Когда пользователь нажимает клавишу 'enter', я ожидаю, что она действительно представит форму, но вместо этого (в пределах как минимум 15) я обнаруживаю, что она запускает первый button (поскольку это происходит раньше в HTML чем вход submit, я думаю).
Я знаю, что в общем случае вы не можете заставить браузеры поддерживать конкретный вход submit, но я действительно думал, что они будут одобрять входы 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;
}
});
});
Вам не нужен JavaScript, чтобы выбрать кнопку отправки или ввод по умолчанию. Вам просто нужно пометить его type="submit", а остальные кнопки отметят их с помощью type="button". В вашем примере:
<button type="button" onclick="return myFunc1()">Button 1</button>
<input type="submit" name="go" value="Submit"/>
Попробуйте это, если нажать клавишу ввода, вы можете записать ее так, например, я разработал ответ на другой день html button указать выбранный, посмотрите, помогает ли это.
Укажите имя формы, например, 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();
}
}
Я просто столкнулся с проблемой. Моя была отпадает от изменения input до button, и у меня был плохо написанный терминатор тегов />:
Итак, у меня было:
<button name="submit_login" type="submit" class="login" />Login</button>
И только что внесли поправки:
<button name="submit_login" type="submit" class="login">Login</button>
Теперь работает как шарм, всегда раздражающие мелочи... HTH
Учитывая, что существует только одна (или с этим решением потенциально не одна) кнопка отправки, вот решение на основе 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>
Я просто дал это завихрение как в Chrome, так и в Firefox и IE10.
Как уже упоминалось выше - убедитесь, что вы отметили тип = "button", "reset", "submit" и т.д., чтобы убедиться, что он правильно каскадирует и выбирает правильную кнопку.
Возможно, также установив для них одну и ту же форму (т.е. все, что сработало для меня)
$("form#submit input").on('keypress',function(event) {
event.preventDefault();
if (event.which === 13) {
$('button.submit').trigger('click');
}
});