У меня есть динамическая веб-страница с JS. Существует текстовое поле и кнопка отправки, но нет тегов формы. Как сделать кнопку "Отправить", и текстовое поле будет очищено при нажатии клавиши "Enter" в текстовом поле?
Передача данных из textarea путем нажатия "Enter"
Ответ 1
Вы можете использовать обработчик keyup для текстового поля (хотя я бы советовал против него).
[SomeTextarea].onkeyup = function(e){
e = e || event;
if (e.keyCode === 13) {
// start your submit function
}
return true;
}
* Почему бы не использовать текстовое поле ввода для этого? Textarea особенно подходит для многострочного ввода, текстового поля ввода для однострочного ввода. С помощью обработчика ввода вы вставляете многострочный вход. Я помню, что однажды использовал его для приложения чата XHR (aka AJAX) (так что текстовая область вела себя как область ввода MSN), но снова активировала многострочный ввод с помощью клавиши CTRL-enter для новых строк. Может быть, это идея для вас? Слушатель будет расширен следующим образом:
[SomeTextarea].onkeyup = function(e){
e = e || event;
if (e.keyCode === 13 && !e.ctrlKey) {
// start your submit function
}
return true;
}
Ответ 2
Включение Enter в textarea
вставляет разрыв строки, а не представляет родительскую форму; это не будет работать таким образом даже с обычными тегами формы.
Было бы нецелесообразно пытаться обойти это поведение, так как это нарушит ожидания пользователя о том, как ведут себя элементы управления текстовыми областями, как на других веб-сайтах, так и в других приложениях на своей платформе.
Ответ 3
@Shog9 предложил мне скопировать мой ответ на дублированную версию этого вопроса: Одной из проблем, которые игнорируются, являются пользователи, использующие метод ввода (редакторы) - например. нелатинская текстовая запись. IME, с которым я знаком, - это Kotoeri Hiragana IM на OSX, но есть множество других как для японцев (только у Kotoeri есть несколько разных режимов ввода, и там, по крайней мере, еще один крупный, называемый ATOK), помимо режимов для hangul, традиционный и упрощенный китайский, а также множество других менее известных языков. И эти методы ввода существуют на всех основных платформах (например, Win, Mac и Linux).
Проблема, которую они вводят с точки зрения кода, аналогичного тому, что вы пытаетесь, заключается в том, что точные физические нажатия клавиш не обязательно соответствуют фактическому вводу, который вводит пользователь.
Например, при вводе последовательности символов toukyou<enter>
под hiragana по умолчанию будет выводиться строка とうきょう
, обратите внимание, что в результирующем тексте нет <enter>
, потому что ввод подтверждает текст с текстом. Но в дополнение к этому фактическая последовательность символов, которая появляется, изменяется при вводе ввода:
t // t
と // to
とう // tou
とうk // touk
とうky // touky
とうきょ // toukyo
とうきょう // toukyou
Если память используется, когда я реализовал это в webkit, необходимо было сделать keyCode 229 на keyDown для всех ключей, введенных в IME (для обеспечения совместимости с IE), но я не могу вспомнить, что такое поведение keyUp.
Также стоит отметить, что в некоторых IME вы не обязательно получите keydowns, keypress или keyup. Или вы получите несколько. Или все они отправлены вместе в конце ввода.
В общем, это очень... нечистая... часть реализаций событий DOM в настоящее время.
Ответ 4
Здесь мое решение:
В Javascript:
function isEnterPressed(e){
var keycode=null;
if (e!=null){
if (window.event!=undefined){
if (window.event.keyCode) keycode = window.event.keyCode;
else if (window.event.charCode) keycode = window.event.charCode;
}else{
keycode = e.keyCode;
}
}
return (keycode == 13);}
В html:
<input type="text" onkeyup="if(isEnterPressed(event)){/*do something*/}" />
Ответ 5
Есть ли причина, по которой вы не используете оболочку формы?
$('#input_id').keypress(function(e){
if(e.which == 13){
$('#form_id').submit();
return false; //prevent duplicate submission
}
});
Ответ 6
Текстовое поле позволяет пользователям вводить несколько строк текста, поэтому нажатие клавиши ввода только вставляет новую строку в текст. Вместо этого используйте нормальное текстовое поле, если вы хотите, чтобы это поведение