简单实现实时输入网页，参考vue底层实现
生活随笔
收集整理的這篇文章主要介紹了
简单实现实时输入网页，参考vue底层实现
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
需要用到的手段
dom操作
通過(guò)id獲取標(biāo)簽內(nèi)容
document.getElementById("填# + id");// 這樣就獲取到了 dom元素事件監(jiān)聽(tīng)
接下來(lái)就開(kāi)始進(jìn)行input的事件監(jiān)聽(tīng)
給input標(biāo)簽的 input 進(jìn)行監(jiān)聽(tīng)document.getElementById("input標(biāo)簽的id").addEventListener("這里是一input事件", 這里是一個(gè)函數(shù));從input標(biāo)簽?zāi)玫街?/p>
接下來(lái)獲取到input的值
//首先選中dom元素 然后.value 就可以獲取到值了var value = document.getElementById("inputID").value;// value 就是獲取到的id值監(jiān)聽(tīng)一個(gè)對(duì)象的屬性
給對(duì)象的屬性之變化
var obj = {};Object.defineProperty(對(duì)象，對(duì)象屬性，對(duì)象{get(){console.log("獲取了對(duì)象的屬性");},set(){console.log("設(shè)置了對(duì)象的屬性");}})接下來(lái)我來(lái)實(shí)現(xiàn)這個(gè)簡(jiǎn)單的項(xiàng)目，css寫(xiě)的丑，別介意
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><title>simple Imitate</title><style>/* css 實(shí)現(xiàn) */.bigBox{width: 400px;height: 50px;}.bigBox #box {width: 200px;height: 50px;font-size: 25px;color: aqua;cursor: pointer;float: left;}.bigBox span{display: block;width: 120px;height: 50px;font-size: 25px;color: skyblue;cursor: pointer;float: left;}.secondBox{width: 400px;height: 120px;}.secondBox span{display: block;width: 120px;height: 50px;font-size: 25px;color: skyblue;cursor: pointer;float: left;}.secondBox #box1{width: 200px;height: 33px;font-size: 25px;color: aqua;float: left;border: 1px solid #d1d1d1;outline: none;}</style> </head> <body> <!-- html 結(jié)構(gòu) --> <div class="bigBox"><span>輸入回顯</span><div id="box">你好，世界！</div> </div> <div class="secondBox"><span>輸入</span><label><input id="box1" type="text" name="text"> </label> </div> <script>// 這個(gè)函數(shù)實(shí)現(xiàn)的是傳入?yún)?shù) 渲染dom 并且這里是監(jiān)聽(tīng)給對(duì)象賦值的過(guò)程,簡(jiǎn)單看看應(yīng)該能看懂function init(value) {var obj = {}let obox = document.getElementById("box");Object.defineProperty(obj, "myname", {// 這里是獲取屬性時(shí)觸發(fā)的函數(shù)get() {console.log("get")},// 這里是設(shè)置屬性時(shí)觸發(fā)的函數(shù)set(value) {console.log(value);obox.innerHTML = value;}});// 設(shè)置對(duì)象屬性 將input事件穿過(guò)來(lái)的值賦值到obj.name;obj.myname = value}// 這里是input事件觸發(fā)后執(zhí)行的函數(shù)function RePlaceHander() {// 這里獲取了input標(biāo)簽里的值var value = document.getElementById("box1").value;init(value);}// 監(jiān)聽(tīng)input標(biāo)簽變化function RePlace() {document.getElementById("box1").addEventListener("input", RePlaceHander);}RePlace(); </script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的简单实现实时输入网页，参考vue底层实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 主机游戏和pc游戏的区别 游戏和主机游戏
- 下一篇： Vue2 的学习经历 初识