如何使用jQuery获取和设置textarea值

Question

我的表单上有一个文本编辑器。 当我单击textarea中的某个内容时，textarea列的弹出窗口中会显示相同的值。

这是我必须设置结果的文本区域：

<textarea name="content" class="text_editor" id="textarea" ></textarea>

查看要获得结果的页面：

<div class="form-group mod_mr20">
    <label class="col-md-3 control-label">Notice Description</label>
    <div class="col-md-9 col-md-offset-1 hidden_color">
       <p></p>//display view here
    </div>
</div>

这是我的预览按钮：

<button class="btn btn-primary mr5"  data-toggle="modal" type="button" name="submit" data-target="#pre_view" >PREVIEW</button>

在弹出窗口中显示视图结果后，不允许用户编辑这些值

Answer 1

如果您使用boostrap，请尝试以下代码：

$(document).on('show.bs.modal','#Your-modal-popup-id', function () {
    alert('hi');
    $(e.currentTarget).find('.hidden_color p').html($("#textarea").val());
})

Answer 2

请尝试一下

我想你正在努力做到这一点，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script>
    $(document).ready(function(){
        $("#preview").on('click',function(){
            $('.col-md-9.col-md-offset-1.hidden_color > p').html($('#textarea').val());
        });
    });
</script>

<textarea name="content" class="text_editor" id="textarea" ></textarea>
<button type="button" class="btn btn-info btn-lg" id="preview" data-toggle="modal" data-target="#myModal">Preview</button>
<!--Your Model-->
<div class="form-group mod_mr20">
    <label class="col-md-3 control-label">Notice Description</label>
    <div class="col-md-9 col-md-offset-1 hidden_color">
       <p></p>//display view here
    </div>
</div>