Question

我目前有一个实时聊天室正在运行，只是问了一些用户我可以做些什么来使聊天室更好。多次被问到的一件事是......

＆＃34;您能否添加一项功能，按下输入按钮将发送我的信息，而不是在文本框中添加新行？＆＃34;

我尝试从StackOverflow上的不同帖子中应用一些jQuery，但无法使其工作。这是我目前的代码......

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>

Answer 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');
});

Demo

Answer 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>

Answer 3

如果用户按下回车键

，为什么不触发事件点击

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

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

//从我的代码中获取希望它能够......

按下回车键时提交表格

3 个答案: