Отправлять форму при нажатии клавиши enter

#javascript #php #jquery #html #ajax

#javascript #php #jquery #HTML #ajax

Вопрос:

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

«Не могли бы вы, пожалуйста, добавить функцию, при которой нажатие кнопки enter отправит мое сообщение вместо добавления новой строки в текстовое поле?»

Я попытался применить некоторый jQuery из другого поста в StackOverflow, но не смог заставить его работать. Вот мой текущий код…

jQuery:

 <!-- jQuery for submitting form -->
<script>
var msgForm = false;

      $(function () {

    $('.expand').keyup(function(event) {
        if (event.keyCode == 13) {
        this.form.submit();
            msgForm = true;
            return true;
         }
    });

    if( msgForm = true ) {
        $('#formSend').on('submit', function (e) {

          e.preventDefault();

          var formData = $('form').serialize();
          $('.expand').prop("disabled", true)

          $.ajax({
            type: 'post',
            url: 'send.php',
            data: formData,
            success: function () {
              $(".expand").val('');
              $('.expand').prop("disabled", false) 
            }
          });

        });
        }

      });

    </script>

Здесь ^^ для отправки сообщения выполняется Ajax-запрос, поэтому обновление страницы не требуется, как в обычной форме.

Вот HTML-разметка для формы, если это необходимо…

   <form action="send.php" method="post" name="formSend" id="formSend" />
     <textarea id="styled" class="expand" name="msg" placeholder="Your Message Here" onfocus:"setbg('#e5fff3');"required></textarea>
     <input type="submit" name="submit" value="Send" class="send" />
  </form>

1. Отправка jquery должна автоматически выполнять это. Вам не нужно привязывать onkeyup событие для его получения.

2. Да, но пользователь не хочет перемещать мышь к кнопке отправки.

3. Пример ( просто нажмите enter )

4. Простое нажатие enter в текстовой области не отправляет форму.

5. @Darren Это не работает с textarea , и это то, что использует OP.

Ответ №1:

Я только что протестировал это в jsfiddle, и это работает нормально.

HTML:

 <form>
    <textarea></textarea>
    <input type="submit" value="Submit"/>
</form>

javascript:

 $("textarea").keyup(function(event){
    if(event.keyCode == 13){
        $("form").submit();
    }
});

$("form").on('submit', function(e){
    e.preventDefault();
    alert('abcde');
});

ДЕМОНСТРАЦИЯ

Ответ №2:

Почему бы просто не поместить их в одно действие. Нет необходимости разделять. Вот так:

 <form action="send.php" method="post" name="formSend" id="formSend" />
    <textarea id="styled" class="expand" name="msg" placeholder="Your Message Here" onfocus:"setbg('#e5fff3');" required></textarea> <br/>
    <input type="submit" name="submit" value="Send" class="send" />
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('.expand').keyup(function(event) {
        if(event.keyCode == 13) {
            var formData = $('#formSend').serialize();
            $(this).prop('disabled', true);
            console.log(formData);
            $.ajax({
                type: 'POST',
                url: 'send.php',
                // url: document.URL,
                data: formData,
                success: function(response) {
                    $('.expand').attr('placeholder', 'Sending Message...');
                    setTimeout(function(){
                        $('.expand').attr('placeholder', 'Your Message Here').prop('disabled', false);
                        // sample delay
                    }, 1000);
                    $(".expand").val('');
                }
            });
        }
    });
});
</script>

Ответ №3:

Почему бы не вызвать событие click, если пользователь нажимает клавишу enter

 $('selector').on('keyup', function(e) {
  if(e.which == 13) {
      $('button_selector').trigger('click');
  }
}

$('button_selector').on('click', function() { 
 //do ajax request here.....
});

// получить из моего кода, надеюсь, он исправится….