Как сделать "Enter" ключ в текстовой области, отправьте форму

У меня есть чат, который по понятным причинам использует textarea вместо текста. Вот почему каждый раз, когда участники нажимают ENTER, они получают новую строку вместо отправки сообщения. Я хотел бы изменить это, поэтому каждый раз, когда они нажимают 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>

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

Ответы

Ответ 1

Я создал 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();
        }
    });
});

Ответ 2

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

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

Ответ 3

Ванильное 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 формы, слушатели событий не будут вызываться.

Ответ 4

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

В нижнем колонтитуле до </body> :

<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 не может быть и речи, то, возможно, обновите свой вопрос, чтобы специально исключить его.

Ответ 5

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