Предварительный просмотр для полей увеличения

Question

Я пытаюсь создать форму, содержащую поле вопроса и поле ответа.

Поле вопроса остается постоянным, а при нажатии кнопки поле ответа увеличивается до максимального количества, установленного для него.

Когда пользователь вводит данные в эти поля одновременно, я хочу показать им предварительный просмотр введенного текста.

Я могу сделать это для одного поля, но поле ответа - это увеличивающееся поле, и я не могу понять, как показать предварительный просмотр для увеличиваемых полей.

HTML:

<fieldset id="5" style="padding-top:30px;"> 
    <div> 
    <b>Question</b> 
    <input type="text" name="word" class="word2" 
     placeholder="Question" style="margin-left:32px; 
     width:150px;"/> 
    </div> 
</fieldset> 


<fieldset id="6"> 

    <div class="container"> 
    <div class="row"> 
     <div class="control-group" id="fields"> 

     <div class="controls"> 
      <form role="form" autocomplete="off"> 
      <b>Choice(s)</b><br /><br /> 
      <div class="entry input-group col-xs-3"> 

       <input class="word" name="fields[]" type="text" placeholder="Choice" /> 
       <span class="input-group-btn"> 
<button class="btn btn-success btn-add" type="button"> 
<span class="glyphicon glyphicon-plus"></span> 
       </button> 
       </span> 
      </div> 
      </form> 
      <br> 

     </div> 
     </div> 
    </div> 
    </div> 

</fieldset> 

<fieldset id="2"> 
    <div style="padding: 20px;"> 
    <b><span class="word2_preview"></span></b> 
    </div> 
</fieldset> 

<fieldset id="3"> 
    <div style="padding:20px;"> 
    <b><span class="word_preview"></span></b> 

    </div> 
</fieldset> 

JavaScript:

$(function() { 
    $(document).on('click', '.btn-add', function (e) { 
    e.preventDefault(); 

    var controlForm = $('.controls form:first'), 
     currentEntry = $(this).parents('.entry:first'), 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 

    newEntry.find('input').val(''); 
    controlForm.find('.entry:not(:last) .btn-add') 
     .removeClass('btn-add').addClass('btn-remove') 
     .removeClass('btn-success').addClass('btn-danger') 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
    }).on('click', '.btn-remove', function (e) { 
    $(this).parents('.entry:first').remove(); 

    e.preventDefault(); 
    return false; 
    }); 
}); 
</ script > 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ 
     libs/jquery/1.3.0/jquery.min.js"></script> < 
    script type = "text/javascript" > 
    $(function() { 
    $(".word").keyup(function() { 
     var word = $(this).val(); 
     $(".word_preview").html(word); 
     return false; 
    }); 
    }); 

</script> 

Answer 1

Use jQuery `text()` method 

$(function() { 
 
    $(document).on('click', '.btn-add', function (e) { 
 
    e.preventDefault(); 
 

 
    var controlForm = $('.controls form:first'), 
 
     currentEntry = $(this).parents('.entry:first'), 
 
     newEntry = $(currentEntry.clone()).appendTo(controlForm); 
 

 
    newEntry.find('input').val(''); 
 
    controlForm.find('.entry:not(:last) .btn-add') 
 
     .removeClass('btn-add').addClass('btn-remove') 
 
     .removeClass('btn-success').addClass('btn-danger') 
 
     .html('<span class="glyphicon glyphicon-minus"></span>'); 
 
     
 
    }) 
 
    .on('click', '.btn-remove', function (e) { 
 
    $(this).parents('.entry:first').remove(); 
 

 
    e.preventDefault(); 
 
    return false; 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $(document).on("keyup",".word",function() { 
 
     var word = $(this).val(); 
 
     var parent_index = $(this).parent(".entry").index(); 
 
     var id = "#word_prev_" + parent_index; 
 
     var elem = document.getElementById(id); 
 

 
     //if element was created just show the word preview 
 
     if(elem){ 
 
     console.log("exists"); 
 
     $(elem).text(word); 
 
     } 
 
     //if not create it and show the preview 
 
     else 
 
     { 
 
      console. log("creating"); 
 
      $("#word_preview_wrapper > div").append("<b><span id=" + id +">" + word + "</span></b><br/>"); 
 
      } 
 
     //return false; 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<fieldset id="5" style="padding-top:30px;"> 
 
    <div> 
 
    <b>Question</b> 
 
    <input type="text" name="word" class="word2" 
 
     placeholder="Question" style="margin-left:32px; 
 
     width:150px;"/> 
 
    </div> 
 
</fieldset> 
 

 

 
<fieldset id="6"> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="control-group" id="fields"> 
 

 
     <div class="controls"> 
 
      <form role="form" autocomplete="off"> 
 
      <b>Choice(s)</b><br /><br /> 
 
      <div class="entry input-group col-xs-3"> 
 

 
       <input class="word" name="fields[]" type="text" placeholder="Choice" /> 
 
       <span class="input-group-btn"> 
 
<button class="btn btn-success btn-add" type="button"> 
 
<span class="glyphicon glyphicon-plus"></span> 
 
       </button> 
 
       </span> 
 
      </div> 
 
      </form> 
 
      <br> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</fieldset> 
 

 
<fieldset id="word_preview_wrapper"> 
 
    <div style="padding:20px;"> 
 
    </div> 
 
</fieldset>

Как это я думаю

Answer 2

Change KeyUp событие как ниже

$(".word").bind('keyup',function() { 
    addText(); 
    return false; 
}); 

Добавить AddText функцию пыльник

function addText(){ 
    var text = ""; 
    $('input.word').each(function(i, obj){ 
     text+=obj.value + "<br>"; 
     console.log(text); 
    }); 
    $(".word_preview").html(text); 
} 

добавить также сильфона блок, чтобы .btn добавьте setion

$(".word").unbind('keyup').bind('keyup',function() { 
     addText(); 
     return false; 
}); 

Это все