Подтвердить что ты не робот

Передача данных из textarea путем нажатия "Enter"

У меня есть динамическая веб-страница с JS. Существует текстовое поле и кнопка отправки, но нет тегов формы. Как сделать кнопку "Отправить", и текстовое поле будет очищено при нажатии клавиши "Enter" в текстовом поле?

4b9b3361

Ответ 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

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