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 ...
随机推荐
- LightOJ - 1226 - One Unit Machine(排列组合）
链接: https://vjudge.net/problem/LightOJ-1226 题意: OUM is a one unit machine which processes jobs. Sinc ...
- 历史相关API
一.history对象 ①history.back()移动到上一个访问页面,等同于浏览器的后退键. ②history.forward()动到下一个访问页面,等同于浏览器的前进键. ③history.g ...
- [matlab工具箱] 曲线拟合Curve Fitting
——转载网络 我的matlab版本是 2016a 首先,工具箱如何打开呢? 在 apps 这个菜单项中,可以找到很多很多的应用,点击就可以打开具体的工具窗口 本文介绍的工具有以下这些: curve F ...
- Processing 2.1.1 无法使用video和movie问题解决方案
升级到2.1.1后,尝试着运行了一下sample中的video和movie,结果都报错,上网搜了一下,找到解决方法. 1. 首先来看movie的错误,如下: JNA: Callback org.gst ...
- 模板 - 数据结构 - 栈/Stack
普通的栈大家都会写,STL的栈据说默认实现方式是deque,没关系反正deque跑得飞快. 这里收录的是一些奇怪的栈,当然双栈实现的队列收录在队列里面. 对顶栈 众所周知,栈可以维护一系列前缀和,包括 ...
- 【CSP模拟赛】避难向导（倍增lca&树的直径）
耐力OIer,一天7篇博客 题目描述 “特大新闻,特大新闻!全国爆发了一种极其可怕的病毒,已经开始在各个城市 中传播开来!全国陷入了巨大的危机!大量居民陷入恐慌,想要逃到其它城市以 避难!经调查显示, ...
- iOS开发之如何在用户删除应用后保持一些数据
在开发过程中我们有时候在用户删除时候保存一些信息在用户下次安装应用时候使用,这个时候我们可以使用剪切版UIPasteboard的FindUIPasteboard和钥匙串keychain的使用 剪切版剪 ...
- NoSql数据库MongoDB系列（1）——MongoDB简介
一.NoSQL简介 NoSQL(Not Only SQL ),意即“不仅仅是SQL” ,指的是非关系型的数据库 .是一项全新的数据库革命性运动,早期就有人提出,发展至2009年趋势越发高涨.No ...
- Java 从入门到进阶之路（十六）
在之前的文章我们介绍了一下 Java 中类的多态,本章我们来看一下 Java 中类的内部类. 在 Java 中,内部类分为成员内部类和匿名内部类. 我们先来看一下成员内部类: 1.类中套类,外面的叫外 ...
- 前端 MV*框架的意义
早期前端都是比较简单,基本以页面为工作单元,内容以浏览型为主,也偶尔有简单的表单操作,基本不太需要框架. 随着 AJAX 的出现,Web2.0的兴起,人们可以在页面上可以做比较复杂的事情了,然后前端框 ...