html js 监控 显示

现有:
1、一个input输入文本框
2、提交文本框信息的提交按钮
3、div2
现在:单击提交按钮:文本框里面的信息显示在div2中

想要:
不需要单击提交按钮
div2里面显示的信息能够随着input文本框输入的信息变化而变化(就是说文本框里输入啥div2里面就显示啥,实时显示)
div2将自动更新文本框输入的数据

在input中加入oninput=“onInput()”事件
然后在onInput中获取div元素并赋值即可
$(".xxx").val(inputValue);

  1. vue的v-model数据双向绑定,参考:https://www.runoob.com/vue3/vue3-forms.html
    操作实例:https://www.runoob.com/try/try.php?filename=vue3-form1
  2. react的表单,参考:https://www.runoob.com/react/react-forms-events.html
    操作实例:https://www.runoob.com/try/try.php?filename=try_react_form
  3. jquery或者原生js类似,绑定input事件,获取值填入div

<input type="text" oninput="getValue(this)"/>
    <div id="showText"></div>
    <script>
      function getValue(event){
        document.getElementById("showText").innerHTML = event.value;
      }
    </script>

img