简单实现实时输入网页，参考vue底层实现

最新推荐文章于 2022-10-23 15:48:31 发布

zeuskk

最新推荐文章于 2022-10-23 15:48:31 发布

阅读量118

点赞数

分类专栏：大前端文章标签： html css javascript

本文链接：https://blog.csdn.net/god953/article/details/120680549

版权

大前端专栏收录该内容

48 篇文章 1 订阅

订阅专栏

需要用到的手段

dom操作

通过id获取标签内容

 document.getElementById("填# + id");
 // 这样就获取到了 dom元素

事件监听

接下来就开始进行input的事件监听

 给input标签的 input 进行监听
 document.getElementById("input标签的id").addEventListener("这里是一input事件", 这里是一个函数);

从input标签拿到值

接下来获取到input的值

 //首先选中dom元素 然后.value 就可以获取到值了
 var value = document.getElementById("inputID").value;
 // value 就是获取到的id值

监听一个对象的属性

给对象的属性之变化

 var obj = {};
 Object.defineProperty(对象，对象属性，对象{
 	get(){
 		console.log("获取了对象的属性");
 	},
 	set(){
 		console.log("设置了对象的属性");
 	}
 })

接下来我来实现这个简单的项目，css写的丑，别介意


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>simple Imitate</title>
    <style>
    	/* css 实现 */
        .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 结构 -->
<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>
	// 这个函数实现的是传入参数 渲染dom 并且这里是监听给对象赋值的过程,简单看看应该能看懂
    function init(value) {
        var obj = {}
        let obox = document.getElementById("box");
        Object.defineProperty(obj, "myname", {
        	// 这里是获取属性时触发的函数
            get() {
                console.log("get")
            },
            // 这里是设置属性时触发的函数
            set(value) {
                console.log(value);
                obox.innerHTML = value;
            }
        });
        // 设置对象属性 将input事件穿过来的值赋值到obj.name;
        obj.myname = value
    }

	// 这里是input事件触发后执行的函数
    function RePlaceHander() {
    	// 这里获取了input标签里的值
        var value = document.getElementById("box1").value;
        init(value);
    }
    // 监听input标签变化
    function RePlace() {
        document.getElementById("box1").addEventListener("input", RePlaceHander);
    }
    RePlace();
</script>
</body>
</html>

zeuskk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单实现实时输入网页，参考vue底层实现

需要用到的手段dom操作通过id获取标签内容 document.getElementById("填# + id"); // 这样就获取到了 dom元素事件监听接下来就开始进行input的事件监听给input标签的 input 进行监听 document.getElementById("input标签的id").addEventListener("这里是一input事件", 这里是一个函数);从input标签拿到值接下来获取到input的值 //首先选中do
复制链接

扫一扫

专栏目录