Отправка данных из textarea, нажав «Enter»

Question

У меня динамическая веб-страница с JS. Есть кнопка <textarea> и Send , но нет тегов <form>. Как заставить Отправить кнопку огня и <textarea> очиститься при нажатии Enter в <textarea>?

Answer 1

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

[SomeTextarea].onkeyup = function(e){
  e = e || event;
  if (e.keyCode === 13) {
    // start your submit function
  }
  return true;
 }

* Почему бы не использовать поле ввода текста для этого? Textarea особенно подходит для многострочного ввода, поле ввода текста для однострочного ввода. С помощью обработчика ввода вы искажаете многострочный ввод. Я помню, как однажды использовал его для приложения чата XHR (он же AJAX) (поэтому текстовая область работала как область ввода MSN), но снова включил многострочный ввод, используя клавишу CTRL-ввод для новых строк. Может быть, это идея для вас? Слушатель будет расширен так:

[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

@ Shog9 предложил мне скопировать мой ответ на дублированную версию этого вопроса: Одна проблема, которая игнорируется, это пользователи, использующие метод ввода (редакторы), например. нелатинский текстовый ввод. IME, с которым я знаком, - это IM Kotoeri Hiragana на 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 (для compat с IE) - но я не могу вспомнить, каково поведение keyUp.

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

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

Answer 4

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

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

Answer 5

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

В 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 6

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