JS和vue文本框输入改变p标签的内容测试
文本框输入，p标签的内容自动变成文本框的内容，如下是三种方法的测试：
方法1：JS里的onchange，当文本框内容改变事件，该事件里写的方法是，获取p标签本身，然后获取文本框的值，赋值给变量，最后给p标签赋值那个文本框的值。
效果：输入途中，p标签不会变化，还是原来的内容，当输入的焦点离开文本框时，p标签变成了文本框中的值。
方法2：JS里的oninput，当文本框内容改变事件（不同于上面的，会即时生效），该事件的方法同上。
效果：输入途中，p标签也会跟着变化，即时是输入途中也会改变。
方法3：引入vue.js，给input文本框加v-mode，在div3里p标签位置设置需要显示内容的地方
效果：输入途中，p标签也会跟着变化，即时是输入途中也会改变。
测试代码：
<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=txt_t1;}
</script> <div id="div2"><!--非vue-一些ie低版本不支持-->
JS的oninput事件：
<input type="text" id="t2" oninput="p2()">
<p id="pp2">原始值</p>
</div>
<script>
function p2() {
var lb_p=document.getElementById("pp2");
var 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: '原始值'
}
})
</script>
</body>
图示：
JS和vue文本框输入改变p标签的内容测试的更多相关文章
- js各种验证文本框输入格式
不能为空 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 只能输入英文 ...
- js中——限制文本框输入非数字
//先把非数字的都替换掉,除了数字和.和/ obj.value = obj.value.replace(/[^\-\d./]/g, ""); //必须保 ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- js入门-文本框输入特定内容控制另一个文本框
在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义 ...
- js正则表达式限制文本框只能输入数字,小数点,英文字母
1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...
- JS 正则表达式 控制文本框只能输入中文、英文、数字与指定特殊符号
JS 正则表达式 控制文本框只能输入中文.英文.数字与指定特殊符号(屏蔽表情输入) onkeyup:释放键盘事件 onpaste:粘贴事件 oncontextmenu :鼠标右击事件 只能输入中文: ...
- JS文本框输入限制
1上面的文本框只能输入数字代码(小数点也不能输入): CODE: <input onkeyup="this.value=this.value.replace(/\D/g,'')&quo ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
随机推荐
- Dubbo生产者和消费者经典案例
一.导入依赖 <dependency> <groupId>javaee</groupId> <artifactId>javaee-api</art ...
- Linux 文件系统缓存 -针对不同数据库有不同作用
文件系统缓存 filesystem cache 许多人没有意识到.文件系统缓存对于性能的影响.Linux系统默认的设置倾向于把内存尽可能的用于文件cache,所以在一台大内存机器上,往往我们可能发现没 ...
- Uoj #35. 后缀排序(后缀数组)
35. 后缀排序 统计 描述 提交 自定义测试 这是一道模板题. 读入一个长度为 nn 的由小写英文字母组成的字符串,请把这个字符串的所有非空后缀按字典序从小到大排序,然后按顺序输出后缀的第一个字符在 ...
- 利用Synplify Pro 加时钟约束的问题
可以改名称为"design.ucf"加成新约束. 在使用Xilinx ISE进行综合时,可以与Synplify Pro软件配合,实现较高的综合性能.但是,有时会出现如下问题: “E ...
- FCS省选模拟赛 Day3
Description Solution T1 game 咕咕咕 T2 string fail树各个节点的深度之和怎么求? 我们考虑每个前缀的深度是什么 发现这个值就相当于有多少个前缀等于它的后缀 ...
- PHP连接MySQL创建表
源代码: <?php header("Content-Type:text/html;charset=utf8");//声明编码格式 $conn=mysqli_connect( ...
- VMware workstation虚拟机与真机之间复制文件
首先选择导航栏的“虚拟机”选项,在下拉菜单中选择“安装VMware Tools” 弹出自动播放的选项,选择安装setup64.exe 开始安装VMware Tools,安装过程都保持默认即可,一直点 ...
- GO语言Error处理
Go语言没有提供像Java.C#.Python语言中的try...catch异常处理方式,而是通过函数返回值逐层往上抛.好处就是避免漏掉本应处理的错误.坏处是代码啰嗦. 错误与异常区别 错误指的是可能 ...
- 深入理解JVM虚拟机13：再谈四种引用及GC实践
Java中的四种引用类型 一.背景 Java的内存回收不需要程序员负责,JVM会在必要时启动Java GC完成垃圾回收.Java以便我们控制对象的生存周期,提供给了我们四种引用方式,引用强度从强到弱分 ...
- eQTL | Expression quantitative trait loci | 表达数量性状基因座 | QTL | 数量性状位点
到底什么是eQTL? eQTL和QTL之间有什么联系?为什么说QTL比eQTL难很多? QTL和GWAS有什么关系? GTEx数据库里的eQTL数据如何利用? 说eQTL之前必须先解释QTL,QTL, ...