需要用到的手段

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>

简单实现实时输入网页，参考vue底层实现相关推荐

Vue底层实现原理概述
Vue是一个典型的MVVM框架,模型(Model)只是普通的JavaScript对象,修改它则视图(View)会自动更新.这种设计让状态管理变得非常简单而直观.那么Vue是如何把模型和视图建立起关联的 ...
java爬虫-简单爬取网页图片
刚刚接触到"爬虫"这个词的时候是在大一,那时候什么都不明白,但知道了百度.谷歌他们的搜索引擎就是个爬虫. 现在大二.再次燃起对爬虫的热爱,查阅资料,知道常用java.python语 ...
html 倒计时字体消失,最简单的一个网页倒计时代码时间到期后会显示出提醒内容收藏版...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼很多时候我们都是需要提醒自己做什么事情的,像我这么健忘的,更加需要倒计时之类的记录来提醒自己,这是我找到最简单简介的代码了! 最简单的一个网页倒计时代码 ...
php与html网页制作,web 一个简单地三级网页的设计和编写，html+css，适合学习制作的新手 WEB(ASP,PHP,...) 238万源代码下载- www.pudn.com...
文件名称: web下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 4716 KB 上传时间: 2013-06-25 下载次数: 7 提供者: ericc 详细 ...
CSS实验案例02简单专业介绍网页
文章目录 CSS实验案例02简单专业介绍网页 2.1CSS 2.2HTML CSS实验案例02简单专业介绍网页 2.1CSS body {/* 主体*/font-size: 24px;text-ali ...
html表格制作旅游网页,简单实用的网页表格特效_html
在我们制作主页的过程中,用到表格的地方非常多,灵活运用表格技巧可以为我们的网页增色不少,这里我就详细介绍几中特效表格的制作方法. 一.彩色虚线表格 .tab1 { border-top-width: ...
4个简单有效的网页视频下载方法，超级简单好用
有很多网站的视频是没有下载功能的,想要下载视频怎么办呢?今天就分享给大家4个简单有效的网页视频下载方法,多个平台都适用,而且操作简单,一看就会! 一.审查元素下载一个简单快速的网页视频下载的方法,不 ...
div+css静态网页设计电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板文章目录 HTML5期末大作业:电商购物网站设计- ...
HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板
HTML5期末大作业:电商购物网站设计--电商购物网站设计(55页) 电商网页设计制作简单静态HTML网页作品购物网页作业成品学生商城网站模板常见网页设计作业题材有个人. 美食. 公司. 学 ...

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

需要用到的手段

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

简单实现实时输入网页，参考vue底层实现相关推荐

最新文章

热门文章