Показать поле textarea на той же странице с AJAX

Question

Я пытаюсь показать значение ввода textarea при вводе с использованием keyup в моем showContent div (я добавлю еще код позже). Но я не хорошо с 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()); 
}) 

Надеется, что это помогает.

$('body').on('input', '#content', function(){ 
 
    $('#showContent').text($(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>

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(){ 
 
\t $("#showContent").html($(this).val()); 
 
\t }); \t \t \t \t \t

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