Soumettre textarea sur entrer keydown sans rafraîchir

Question

Je suis en train de soumettre une zone de texte lorsque l'utilisateur appuie sur la touche Entrée, enregistrez le texte dans une var, puis en remplaçant le formulaire par le texte et en ajoutant un nouveau formulaire, rafraîchissant. J'ai été capable de le faire avec une entrée très bien, mais j'avais besoin de textarea et je n'arrive pas à le faire fonctionner.

HTML:

<div class="col-md-6 col-md-offset-6 col-centered terminal-header"> 
     <div class="close text-center">x</div> 
     <p id="header-text">guest@sethrait:~</p> 
     <div class="row"> 
      <div id="terminal-window" class="col-md-10 col-md-offset-2 col-centered"> 
       <div class="form_wrapper"> 
        <form class="terminal-text"> 
         <p id="p_term" class="terminal-text">guest@sethrait:~ $ </p> 
         <textarea class="form_input" name="terminal" placeholder="Currently under construction, please come back later"></textarea> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 

JS:

$(document).ready(function() { 
$(".form_input").keydown(function(){ 
    if(event.keyCode==13){ 
     $(".terminal-window").on("submit", "form", function (e) { //when form is submitted 
      submitCommand(e); 
     }); 
    } 
    }); 
}); 
//triggered when user submits a command to the console 
function submitCommand(e){ 
    e.preventDefault(); 
    var usrCommand=$('.form_input').val(); 
    processCommand(usrCommand); 
    $(".form_wrapper").replaceWith("<p class='new-terminal-text' style='margin-left: -12px'>"+loc+usrCommand+"</p>"+"<br>"); 
    $("#terminal-window").append("<div class='form_wrapper'><form class='terminal-text'><p class='terminal-text'>guest@sethrait:~ $</p> <textarea class='form_input' name='terminal' placeholder='echo Currently under construction, please come back later'></textarea></form></div>"); 
} 

Answer 1

Remarque, pas certain de ce processCommand, loc sont, semblent ne pas définis à js à la question?

---

Essayez de remplacer $("#terminal-window") pour $(".terminal-window") comme .terminal-windowclass semblent pas à html; fixer événement keydown à document, déléguer event à .form_input comme élément .form_input d'origine semble être remplacé à $(".form_wrapper").replaceWith

$(document).ready(function() { 
 
    $(document).on("keydown", ".form_input", function(event) { 
 
    // console.log(event) 
 
    if (event.keyCode == 13) { 
 
     $("#terminal-window form").on("submit", function(e) { //when form is submitted 
 
     event.preventDefault(); 
 
     submitCommand(event); 
 
     }).submit(); 
 
    } 
 
    }); 
 
    
 
    //triggered when user submits a command to the console 
 
function submitCommand(e) { 
 
    e.preventDefault(); 
 
    var usrCommand = $('.form_input').val(); 
 
    // processCommand(usrCommand); 
 
    $(".form_wrapper").replaceWith("<p class='new-terminal-text' style='margin-left: -12px'>" + usrCommand + "</p><br>"); 
 
    $("#terminal-window").append("<div class='form_wrapper'><form class='terminal-text'><p class='terminal-text'>guest@sethrait:~ $</p> <textarea class='form_input' name='terminal' placeholder='echo Currently under construction, please come back later'></textarea></form></div>"); 
 
} 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="col-md-6 col-md-offset-6 col-centered terminal-header"> 
 
    <div class="close text-center">x</div> 
 
    <p id="header-text">guest@sethrait:~</p> 
 
    <div class="row"> 
 
    <div id="terminal-window" class="col-md-10 col-md-offset-2 col-centered"> 
 
     <div class="form_wrapper"> 
 
     <form class="terminal-text"> 
 
      <p id="p_term" class="terminal-text">guest@sethrait:~ $</p> 
 
      <textarea class="form_input" name="terminal" placeholder="Currently under construction, please come back later"></textarea> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>