Отправка данных из textarea путем нажатия «Enter»

Question

У меня есть динамическая веб-страница с JS. Есть textarea и a кнопка, но нет Форма теги. Как сделать Отправить кнопку огня и текстового поля списываться при Enter нажат в текстового поля?

Answer 1

Вы можете использовать обработчик клавиатуры для текстового поля (хотя я бы посоветовал против него *).

[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; 
} 

Answer 2

Нажатие Enter в textarea вставляет разрыв строки, а не представляет родительскую форму; это не будет работать таким образом даже с обычными тегами формы.

Было бы нецелесообразно пытаться обойти это поведение, поскольку это нарушит ожидания пользователя о том, как ведут себя элементы управления текстовыми областями, как на других веб-сайтах, так и в других приложениях на своей платформе.

Answer 3

Вот мое решение:

В 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*/}" /> 

Answer 4

@ Shog9 предположил, что я копирую мой ответ на дублируемую версию этого вопроса: Одна из проблем, которые игнорируется, - это запуск пользователей ный метод ввода (редакторы) - например. нелатинская текстовая запись. IME, с которым я знаком, - это Kotoeri Hiragana IM на OSX, но есть множество других как для японцев (только у Kotoeri есть несколько разных режимов ввода, и есть, по крайней мере, еще один крупный, называемый ATOK), помимо режимов для hangul, традиционный и упрощенный китайский, а также множество других менее известных языков. И эти методы ввода существуют на всех основных платформах (особенно Win, Mac и Linux).

Проблема, которую они представляют с точки зрения кода, аналогичного тому, что вы пытаетесь, заключается в том, что точные физические нажатия клавиш не обязательно соответствуют фактическому вводу, который вводит пользователь.

Например, набрав последовательность символов toukyou<enter> под хираганом по умолчанию будет производить строку とうきょう, обратите внимание, что в полученном тексте нет <enter> потому что вписывает подтверждает составленный текст. Но в дополнение к этому фактической последовательности символов, которая появляется изменения как вход напечатал:

t // t 
と // to 
とう // tou 
とうk // touk 
とうky // touky 
とうきょ // toukyo 
とうきょう // toukyou 

Если память, когда я реализовал это в WebKit, необходимо было сделать KEYCODE быть 229 на KeyDown для всех клавиш набраны в IME (для совместимости с IE) - но я не могу вспомнить, что такое поведение keyUp.

Также стоит отметить, что в некоторых IME вы не обязательно получите нажатия клавиш, нажатия клавиш или клавиш. Или вы получите несколько. Или все они отправлены вместе в конце ввода.

В целом это очень ... нечистая ... часть реализации событий DOM в настоящее время.

Answer 5

Текстовое поле позволяет пользователям вводить несколько строк текста, поэтому нажатие клавиши ввода только вставляет новую строку в текст. Вместо этого используйте нормальное текстовое поле, если вы хотите этого поведения

Answer 6

Есть ли причина, по которой вы не используете оболочку формы?

$('#input_id').keypress(function(e){ 
    if(e.which == 13){ 
     $('#form_id').submit(); 
     return false; //prevent duplicate submission 
    } 
});