Question

我尝试在我的showContent div中使用 keyup 键入时显示textarea输入的值（我稍后会添加更多代码）。但我对Ajax和/或JQuery不满意，并希望得到一些帮助。

formPage.phtml中的表单（我不知道是否因为它是一个重要的phtml文件）：

<form id="answer_form" class="form" method="post">
   <textarea class="input-text" id="content" name="content" id="answer_content" title="Content"></textarea>
   <div id="showContent"><span></span></div>
</form>

我想在showContent div 中显示内容，而在中输入内容，换句话说，在每个字母后面。

非常感谢！

Answer 1

我建议使用input事件代替keyup，因为当您跟踪用户输入时，它会更有效率：

$('body').on('input', '#content', function(){
    $('#showContent').text( $(this).val() );
})

希望这有帮助。

＆＃13;

$('body').on('input', '#content', function(){
    $('#showContent').text($(this).val());
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="answer_form" class="form" method="post">
  <textarea class="input-text" id="content" name="content" id="answer_content" title="Content"></textarea>
  <div id="showContent"><span></span></div>
</form>

＆＃13;

Answer 2

我希望它能解决你的问题

<form id="answer_form" class="form" method="post">
            <textarea onkeyup="setContent()" class="input-text" id="content" name="content" id="answer_content" title="Content"></textarea>
            <div id="showContent"><span></span></div>
</form>

<script>
function setContent(){
       $("#showContent").html($("#content").val());
}
</script>

Answer 3

您可以按照以下操作

$(document).on('keyup','#content',function(){
      $("#showContent").html($(this).val());
});

$(document).on('keyup','#content',function(){
	  $("#showContent").html($(this).val());
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="answer_form" class="form" method="post">
  <textarea class="input-text" id="content" name="content" id="answer_content" title="Content"></textarea>
  <div id="showContent"><span></span></div>
</form>

使用AJAX在同一页面中显示textarea字段

3 个答案: