如何实现表单输入实时预览

最新推荐文章于 2024-08-16 15:21:34 发布

原创

最新推荐文章于 2024-08-16 15:21:34 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #JavaScript

最近工作中需要给用户做一个引导界面，界面需要体现出用户随时可以看见自己输入后呈现出的效果。实时预览
经过查询资料，实现效果及代码如下：
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">
                <l