Question

我正在尝试在用户按下回车键时提交textarea，将文本保存在var中，然后用文本替换表单并在末尾添加新表单，所有这些都没有刷新。我能够通过输入很好地做到这一点，但我需要textarea并且无法使其正常工作。

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

注意，不确定processCommand，loc是什么，在问题的js处没有定义？

尝试将$("#terminal-window")替换为$(".terminal-window")，.terminal-window class不会出现在html;将keydown个事件附加到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'>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>

提交textarea进入keydown而不刷新

1 个答案: