Invio modulo quando si preme invio nell'area di testo

Question

Ho provato vari metodi per ottenere un modulo da inviare quando si preme il tasto Invio. So che funziona con un campo di input, ma poiché questo sarà un commento, deve essere un'area di testo.

Questo è ciò che attualmente ho per il modulo da inviare con un pulsante.

$('.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; 
}); 

Funziona come dovrebbe. Voglio rimuovere il pulsante di invio e inviare il modulo solo quando un utente preme il tasto Invio. So che alcune persone sconsigliano questo, ma gli utenti di questo sito Web saranno utilizzati per premere Invio da Facebook e così via.

Ho provato metodi simili a questo, ma nessuno sembra funzionare.

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

Ecco il mio codice forma

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

Qualsiasi aiuto sarebbe grande. Inoltre, se qualcuno sa come aggiungere una funzione if che impedirà al modulo di inviare il valore predefinito corrente nell'area di testo, sarebbe fantastico. Attualmente, con come la textarea è impostato adesso, se basta premere invio, essa presenterà Scrivi il tuo commento qui ...

Grazie

EDIT: Può un lavoro intorno essere ... Avere un pulsante da inviare, come normale, ma averlo nascosto, e quando si preme Invio, si attiva una chiamata per quel pulsante? Ma poi ... mi piacerebbe correre nello stesso problema di entrare non fare nulla nella textarea tranne pausa in una nuova linea ...

Answer 1

provare questo 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

provare in questo modo

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

ho provato, e ha funzionato

ho aggiunto solo il parametro event all'intestazione funzione di

Answer 3

penso che si potrebbe anche voler dare agli utenti la capacità di andare a capo usando turno.

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

Vedi questo: http://jsfiddle.net/almirsarajcic/Gd8PQ/

ha funzionato per me.

Inoltre, è necessario rimuovere il pulsante di invio attualmente in uso.