2015-07-12 51 views
0

我想,當用戶按下回車鍵提交一個文本,保存文本的變種,然後用文本替換形式和追加一個新的形式結束textarea的,都沒有令人耳目一新。我能夠與輸入做到這一點就好了,但我需要的文本區域,並不能得到它的工作。提交上輸入的keydown沒有刷新

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">[email protected]:~</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">[email protected]:~ $ </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'>[email protected]ait:~ $</p> <textarea class='form_input' name='terminal' placeholder='echo Currently under construction, please come back later'></textarea></form></div>"); 
} 
+0

請嘗試發佈完整的代碼進行替換,因爲聲明:** ** processCommand和* * **祿不是在你的代碼中找到。 –

回答

0

注意,不能確定什麼processCommandloc的,不會出現在js在問題界定?


嘗試$(".terminal-window").terminal-windowclasshtml不會出現代$("#terminal-window");​​事件附加到document,委託event.form_input作爲原.form_input元素出現在$(".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'>[email protected]:~ $</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">[email protected]:~</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">[email protected]:~ $</p> 
 
      <textarea class="form_input" name="terminal" placeholder="Currently under construction, please come back later"></textarea> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>