Input text box, the contents of the tag automatically becomes p contents of the text box, the following three methods are tested:
Method 1: JS in the onchange, when the text box contents change event, which was written way is to get p tag itself, and then get the value of the text box, and assigned to a variable, the last assigned value of the text box to the p tag.
Effect: Enter the way, p tags will not change, or the original content, when the input focus leaves the text box, p tag values into a text box.
Method 2: JS in the oninput, when the contents of the text box change event (different from the above will be effective immediately), the method of the event above.
Effect: Enter the way, p label changes will follow, will change the way real-time input.
Method 3: introducing vue.js, to input text box plus v-mode, set the content needs to be displayed in place div3 p label position
effect: input on the way, the p tag will follow the change, will change the way real-time input.
Test code:
<style> #div1{background-color:#d9b6b6;} #div2{background-color:#b4e7aa;} #div3{background-color:#c5f2ee;} </style> </head> <body> <script src="vue.js"></script> </head> <body> <div id="div1"><!--非vue--> JS的onchage事件： <input type="text" id="t1" onchange="p1()"> <p id="pp">原始值</p> </div> <script> function p1(){ var lb_p=document.getElementById("pp"); var txt_t1=document.getElementById("t1").value; lb_p.innerHTML=); where txt_t2=document.getElementById("t2").value; lb_p.innerHTML=txt_t2; } </script> <div id="div3"> vue的v-mode： <input v-model="message"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#div3', data: { message: 'Original value ' } }) </ Script > </ body >
Icon:
