Несколько кнопок отправки в HTML-форме – назначьте одну кнопку по умолчанию [дубликат]
https://stackoverflow.com/questions/1963245
-
21-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
На этот вопрос уже есть ответ здесь:
- Несколько кнопок отправки в HTML-форме 23 ответа
У меня есть форма с тремя кнопками отправки:
<input type="submit" name="COMMAND" value="‹ Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="location = 'yada-yada.asp';">
Ряд кнопок представляет собой сочетание кнопок отправки, сброса и JavaScript.Порядок кнопок может быть изменен, но в любом случае кнопка сохранения остается между кнопками «Предыдущая» и «Следующая».
Проблема здесь в том, что когда пользователь нажимает Входить для отправки формы переменная сообщения «COMMAND» содержит «Prev»;нормально, так как это первая кнопка отправки в форме.Однако я хочу, чтобы кнопка «Далее» активировалась, когда пользователь отправляет форму через Входить кнопка.Это похоже на установку ее в качестве кнопки отправки по умолчанию, даже если перед ней есть другие кнопки.
Решение
Я предлагаю не бороться с таким поведением.Вы можете эффективно изменить порядок, используя числа с плавающей запятой.Например:
<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>
с:
#buttons { overflow: hidden; }
#buttons input { float: right; }
фактически изменит порядок, и, таким образом, кнопка «Далее» будет значением, вызываемым нажатием Enter.
Этот метод подойдет для многих случаев без необходимости прибегать к более хитрым методам JavaScript.
Другие советы
Первая кнопка всегда используется по умолчанию;это невозможно изменить.Пока ты может попробуйте исправить это с помощью JavaScript, форма будет вести себя неожиданно в браузере без сценариев, и есть некоторые крайние случаи, связанные с удобством использования и доступностью, о которых следует подумать.Например, код, на который ссылается Зоран, случайно отправит форму при нажатии Enter в <input type="button">, что обычно не происходит, и не отслеживает поведение IE при отправке формы для нажатия Enter на другом содержимом формы, не являющемся полем.Поэтому, если вы нажмете на какой-либо текст в <p> в форме с этим скриптом и нажмите Enter, будет отправлена не та кнопка...особенно опасно, если, как показано в этом примере, настоящей кнопкой по умолчанию является «Удалить»!
Мой совет — забыть об использовании скриптовых хаков для переназначения значений по умолчанию.Следуйте потоку браузера и просто поместите кнопку по умолчанию первой.Если вы не можете взломать макет, чтобы обеспечить желаемый порядок на экране, вы можете сделать это, сначала создав в исходном коде фиктивную невидимую кнопку с тем же именем/значением, что и кнопка, которую вы хотите использовать по умолчанию:
<input type="submit" class="defaultsink" name="COMMAND" value="Save" />
.defaultsink {
position: absolute; left: -100%;
}
(примечание:позиционирование используется для нажатия кнопки за пределами экрана, потому что display: none и visibility: hidden имеют побочные эффекты от переменной браузера, определяющие, будет ли кнопка использоваться по умолчанию и будет ли она отправлена.)
Быстро и быстро вы можете создать скрытый дубликат кнопки отправки, которую следует использовать при нажатии клавиши ввода.
Пример CSS
input.hidden {
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
Пример HTML
<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />
Если кто-то сейчас нажмет «Ввод» в вашей форме, (скрытая) кнопка «Далее» будет использоваться в качестве отправителя.
Протестировано на IE9, Firefox, Chrome и Opera.
Набор type=submit к кнопке, которую вы хотите использовать по умолчанию, и type=button на другие кнопки.Теперь в форме ниже вы можете нажать Enter в любом поле ввода, и Render Кнопка будет работать (несмотря на то, что это вторая кнопка в форме).
Пример:
<button id='close_button' class='btn btn-success'
type=button>
<span class='glyphicon glyphicon-edit'> </span> Edit program
</button>
<button id='render_button' class='btn btn-primary'
type=submit> <!-- Here we use SUBMIT, not BUTTON -->
<span class='glyphicon glyphicon-send'> </span> Render
</button>
Протестировано в FF24 и Chrome 35.
Если вы используете jQuery, это решение из комментария здесь довольно ловко:
$(function(){
$('form').each(function () {
var thisform = $(this);
thisform.prepend(thisform.find('button.default').clone().css({
position: 'absolute',
left: '-999px',
top: '-999px',
height: 0,
width: 0
}));
});
});
Просто добавь class="default" к кнопке, которую вы хотите использовать по умолчанию.Он помещает скрытую копию этой кнопки прямо в начало формы.
Я воскрешаю это, потому что я исследовал способ сделать это без использования JavaScript.Я не разбирался в обработчиках клавиш, а из-за проблем с позиционированием CSS нарушался порядок табуляции, поскольку изменение CSS-позиционирования не меняет порядок табуляции.
Мое решение основано на ответе по адресу https://stackoverflow.com/a/9491141.
Источник решения приведен ниже.tabindex используется для исправления поведения скрытой кнопки на вкладке, а также aria-hidden, чтобы кнопка не считывалась программами чтения с экрана / не идентифицировалась вспомогательными устройствами.
<form method="post" action="">
<button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
<div class="form-group">
<label for="test-input">Focus into this input: </label>
<input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
</div>
1-я кнопка в DOM 2-я кнопка в DOM 3-я кнопка в DOM
Необходимый CSS для этого решения:
.default-button-handler {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
Другое решение с использованием jQuery:
$(document).ready(function() {
$("input").keypress(function(e) {
if (e.which == 13) {
$('#submit').click();
return false;
}
return true;
});
});
Это должно работать в следующих формах, делая «Обновить» действием по умолчанию:
<form name="f" method="post" action="/action">
<input type="text" name="text1" />
<input type="submit" name="button2" value="Delete" />
<input type="submit" name="button1" id="submit" value="Update" />
</form>
А также:
<form name="f" method="post" action="/action">
<input type="text" name="text1" />
<button type="submit" name="button2">Delete</button>
<button type="submit" name="button1" id="submit">Update</button>
</form>
При этом клавиша Enter захватывается только тогда, когда поле ввода в форме имеет фокус.
Не следует использовать одноимённые кнопки.Это плохая семантика.Вместо этого вам следует изменить свой бэкэнд, чтобы он искал различные устанавливаемые значения имени:
<input type="submit" name="COMMAND_PREV" value="‹ Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="window.location = 'yada-yada.asp';">
Поскольку я не знаю, какой язык вы используете в серверной части, я дам вам псевдокод:
if (input name COMMAND_PREV is set) {
} else if (input name COMMAND_SAVE is set) {
} else if (input name COMMENT_NEXT is set) {
}
Недостатком решения bobince является создание кнопки, которую можно Вкладка-d закончен, но в остальном непригоден для использования.Это может запутать пользователей клавиатуры.
Другое решение — использовать малоизвестный form атрибут:
<form>
<input name="data" value="Form data here">
<input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
<input type="submit" name="submit" value="Submit">
</form>
<form id="form2"></form>
Это стандартный HTML, однако, к сожалению, не поддерживается в Internet Explorer.
