最近工作中需要给用户做一个引导界面,界面需要体现出用户随时可以看见自己输入后呈现出的效果。实时预览
经过查询资料,实现效果及代码如下:
html部分:
<div class="container">
<div class="row w-100 justify-content-between">
<div class="col-md-6">
<label class="form-label text-dark mb-0 mt-2">目标</label>
<input type="text" class="form-control goal" aria-describedby="input-group-example">
</div>
<div class="col-md-6">
<label class="form-label text-dark mb-0 mt-2">目标</label>
<p class="form-group text-info goal-view"></p>
</div>
<div class="col-md-6">
<label class="form-label text-dark mb-0 mt-2">期望</label>
<input type="text" class="form-control expect" aria-describedby="input-group-example">
</div>
<div class="col-md-6">
<label class="form-label text-dark mb-0 mt-2">期望</label>
<p class="form-group expect-view text-info"></p>
</div>
</div>
</div>
js部分:
<script>
$('.goal').keyup(function(){
var gtext = $('.goal').val()
$('.goal-view').html(gtext)
});
$('.expect').keyup(function(){
var etext = $('.expect').val()
$('.expect-view').html(etext)
})
</script>
效果如下: