Gửi biểu mẫu khi nhấn enter trong Textarea

Question

Tôi đã thử các phương thức khác nhau để nhận biểu mẫu để gửi khi nhấn phím enter. Tôi biết nó hoạt động với một lĩnh vực đầu vào, nhưng bởi vì đây sẽ là một bình luận, nó cần phải là một khu vực văn bản.

Đây là những gì tôi hiện có để gửi biểu mẫu bằng một nút.

$('.messageSubmit').live('click', function(){ 
    var name = $(this).siblings('.messageTextarea').val(); 
    var theid = $(this).attr('data-the_id'); 
    var dataString = name; 

    $.ajax({ 
     dataType: 'json', 
     url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?"+hash, 
     type: "POST", 
     data: "text="+dataString, 
     success: function(data) { 
      // finish load 
      console.log(data, dataString, 'fail'); 
     }, 
     error: function(data) { 
      var username = JSON.parse(localStorage.getItem('iguser')); 
      var profilepic = JSON.parse(localStorage.getItem('iguserimg')); 
      //console.log(data, dataString, 'succ'); 

      $('.box[data-the_id="' + theid + '"]').children('.postMessage').children('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>'); 

      $('.messageTextarea').val(''); // Remove comment from TextArea 
     } 
    }); 
    return false; 
}); 

Nó hoạt động như bình thường. Tôi muốn xóa nút gửi và chỉ cần gửi biểu mẫu khi người dùng nhấn phím enter. Tôi biết một số người khuyên chống lại điều này, nhưng người dùng trên trang web này sẽ được sử dụng để đánh nhập từ Facebook và như vậy.

Tôi đã thử các phương pháp như vậy, nhưng dường như nó không hoạt động.

$('.messageTextarea').keydown(function() { 
    if (event.keyCode == 13) { 
     this.form.submit(); 
     return false; 
    } 
}); 

Đây là mẫu mã của tôi

<form> 
    <textarea class="messageTextarea" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;">Write your comment here...</textarea> 
    <input type="submit" data-the_id="' + theid + '" name="submit" class="messageSubmit" id="submit_btn" value="Submit your comment"> 
</form> 

Bất kỳ trợ giúp sẽ là tuyệt vời. Ngoài ra, nếu có ai biết cách thêm một hàm if sẽ ngăn cản biểu mẫu gửi với giá trị mặc định hiện tại trong Textarea, điều đó sẽ rất tuyệt vời. Hiện nay, với thế textarea được thiết lập bây giờ, nếu bạn chỉ cần nhấn gửi, nó sẽ nộp Viết bình luận của bạn ở đây ...

Cảm ơn

EDIT: Có thể một công trình xung quanh được ... Có một nút để gửi, như bình thường, nhưng có nó ẩn, và khi bạn nhấn vào nó kích hoạt một cuộc gọi cho nút đó? Nhưng sau đó ... Tôi muốn chạy vào cùng một vấn đề của nhập làm gì trong textarea trừ đột nhập vào một dòng mới ...

Answer 1

thử này jsfiddle

HTML:

<form> 
    <textarea class="messageTextarea">Write your comment here...</textarea> 

</form>​ 

JS:

 $('.messageTextarea').keydown(function(event) { 
    if (event.keyCode == 13) { 
     $(this.form).submit() 
     return false; 
    } 
}).focus(function(){ 
    if(this.value == "Write your comment here..."){ 
     this.value = ""; 
    } 

}).blur(function(){ 
    if(this.value==""){ 
     this.value = "Write your comment here..."; 
    } 
}); 

$("form").submit(function(){ 
     var name = $(this).siblings('.messageTextarea').val(); 
    var theid = $(this).attr('data-the_id'); 
    var dataString = name; 

    $.ajax({ 
     dataType: 'json', 
     url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?", 
     type: "POST", 
     data: "text="+dataString, 
     success: function(data) { 
      // finish load 
      console.log(data, dataString, 'fail'); 
     }, 
     error: function(data) { 
      var username = JSON.parse(localStorage.getItem('iguser')); 
      var profilepic = JSON.parse(localStorage.getItem('iguserimg')); 
      //console.log(data, dataString, 'succ'); 

      $('.box[data-the_id="' + theid + '"]').children('.postMessage').children('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>'); 

      $('.messageTextarea').val(''); // Remove comment from TextArea 
     } 
    }); 

    return false; 
}); 
​ 
​ 

Answer 2

thử nó theo cách này

<form method="post" action=""> 
    <textarea></textarea> 
</form> 

<script type="text/javascript" src="./lib/js/jquery/jquery-1.8.1.min.js"></script> 

<script type="text/javascript"> 
    jQuery('textarea').keydown(function(event) { 
     if (event.keyCode == 13) { 

      this.form.submit(); 
      return false; 
     } 
    }); 
</script> 

Tôi đã thử nghiệm nó, và nó làm việc

tôi thêm chỉ tham số event vào tiêu đề chức năng

Answer 3

Tôi nghĩ bạn cũng sẽ muốn cung cấp cho người dùng khả năng để đi đến dòng sản phẩm mới sử dụng sự thay đổi.

$('.messageTextarea').on('keyup', function(e) { 
    if (e.which == 13 && ! e.shiftKey) { 
     // your AJAX call 
    } 
}); 

Xem này: http://jsfiddle.net/almirsarajcic/Gd8PQ/

Nó làm việc cho tôi.

Ngoài ra, bạn cần phải xóa nút gửi mà bạn hiện có.