Как сделать так, чтобы клавиша «Ввод» в текстовой области отправляла форму

Question

У меня есть чат, который использует текстовую область вместо текста по понятным причинам.Вот почему каждый раз, когда члены нажимают клавишу ВВОД, они получают новую строку вместо отправки сообщения.Я хотел бы изменить это, поэтому каждый раз, когда они нажимают ENTER = сообщение, которое будет отправлено, а затем курсор, чтобы вернуться к textarea для их следующего набора текста сообщения.Я пробовал разные коды, найденные на этом сайте, большинство не работало, и те, кто, казалось, что-то делал, просто обновляли страницу, и я получил пустую страницу.

Мой код:

<form name="message" action="">
    <textarea name="usermsg" autocomplete="off" type="text" id="usermsg" rows="4" cols="30" style="width: 450px; margin-left: 25px;">
    </textarea>
    <br/>

    <p style="margin-left: 420px;"><input name="submitmsg" type="submit"  id="submitmsg" value="Send" /></p>
</form>

Большое спасибо за ваше время.

Answer 1

Попробуйте это (обратите внимание, что когда вы нажимаете ENTER, переходите к отправке, а SHIFT + ENTER - к новой строке.

$("#textareaId").keypress(function (e) {
    if(e.which == 13 && !e.shiftKey) {        
        $(this).closest("form").submit();
        e.preventDefault();
        return false;
    }
});

Answer 2

Я создал jsfiddle с примером того, как это сделать с помощью jQuery и функцией keypress и свойством which: http://jsfiddle.net/GcdUE/

Не уверен, что именно вы просите больше, поэтому, если возможно, уточните свой вопрос.

$(function() {
    $("#usermsg").keypress(function (e) {
        if(e.which == 13) {
            //submit form via ajax, this is not JS but server side scripting so not showing here
            $("#chatbox").append($(this).val() + "<br/>");
            $(this).val("");
            e.preventDefault();
        }
    });
});

Answer 3

Решение Vanilla JavaScript

function submitOnEnter(event){
    if(event.which === 13){
        event.target.form.dispatchEvent(new Event("submit", {cancelable: true}));
        event.preventDefault(); // Prevents the addition of a new line in the text field (not needed in a lot of cases)
    }
}

document.getElementById("usermsg").addEventListener("keypress", submitOnEnter);

---

Если вы предпочитаете не отправлять, если нажата Shift, все, что вам нужно сделать, это изменить строку 2 на:

if(event.which === 13 && !event.shiftKey){

---

Чтобы очистить текстовую область, просто добавьте это в теле оператора if

event.target.value = "";

---

Чтобы использовать это с Internet Explorer 11, измените строку 3 на:

var newEvent = document.createEvent("Event");
newEvent.initEvent("submit", false, true);
event.target.form.dispatchEvent(newEvent);

---

Но подожди?Почему бы не использовать event.target.form.submit();?

Когда вы вызываете метод submit формы, прослушиватели событий не будут вызываться.

Answer 4

Итак, предположим, что вы используете jquery, это будет простой слушатель в вашем поле ввода:

В нижнем колонтитуле до :

<script type="text/javascript">
$(document).ready(function(){
    $('#usermsg').keypress(function(e){
      if(e.which == 13){
           // submit via ajax or
           $('form').submit();
       }
    });
});
</script>

В своей HTML-голове добавьте:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script> 

но если о js или jquery не может быть и речи, возможно, обновите ваш вопрос, чтобы специально исключить его.

Answer 5

Используйте <input type=text> вместо <textarea>.Тогда у вас гораздо больше шансов.В textarea нажатие клавиши Enter должно означать разрыв строки в тексте, а не представление текста.