js实时监听input中值得变化
<!DOCTYPE html>
<html>
<head>
<title>zepto</title>
<meta name="name" content="content">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
html,body {
margin: 0;
padding: 0;
font-size: 62.5%;
}
.wrap {
margin: 20px auto;
width: 500px;
height: 300px;
background: #eee;
}
.word-area ul,
.input-area ul{
list-style: none;
}
.word-area label,
.input-area label{
float: left;
margin-top:1.2rem;
width: 60px;
height: 30px;
text-align: left;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
color: #2c2828;
}
.input-area input {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 6px;
margin-top: 1.2rem;
margin-left: 2rem;
padding: 2px 6px;
line-height: 30px;
}
.word-area p {
display: inline-block;
border: 1px #00bcd4 solid;
margin: 1.2rem 0 0 2rem;
padding: 2px 6px;
width: 200px;
height: 30px;
font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
font-size: 1rem;
line-height: 30px;
background: #fff;
}
.word-area p:hover{
cursor:not-allowed;
}
</style>
</head>
<body>
<div class="wrap">
<div class="input-area">
<ul>
<li>
<label>输入框 1:</label>
<input type="text" oninput="setShowValue(this,'wordOne');" onporpertychange="setShowValue(this,'wordOne');">
</li>
<li>
<label>输入框 2:</label>
<input type="text" oninput="setShowValue(this,'wordTwo');" onporpertychange="setShowValue(this,'wordTwo');">
</li>
</ul>
</div>
<div class="word-area">
<ul>
<li>
<label>显示框 1:</label>
<p id="wordOne"></p>
</li>
<li>
<label>显示框 2:</label>
<p id="wordTwo"></p>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
function setShowValue(self,obj) {
var value=self.value;
document.getElementById(obj).innerHTML=value;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<h1 >
实时监测input中值的变化
</h1>
<input type="text" id="username" autoComplete='off'>
<div id="result"></div>
<div id="value"></div>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#username').bind('input propertychange', function() {
$('#result').html('输入的值长度是： ' + $(this).val().length + ' characters');
$('#value').html('输入的值是： ' + $(this).val());
});
});
</script>
</body>
</html>
js实时监听input中值得变化的更多相关文章
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 关于实时监听input的值得变化的问题
onchange 关于input的onchange事件 其实是有出发条件的 并非实时监听的 1.鼠标点击事件 或者键盘事件(tab和wins键都可以触发 enter在ie9时不触发,火狐和ch ...
- js实时监听input中值的变化
$(function(){ $('#inputid').bind('input propertychange', function() { // input 中的值 var params = $(th ...
- 使用jQuery实时监听input输入值的变化
//jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...
- jq 实时监听input输入框的变化
项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...
- jQuery实时监听input的值变化（input的值产生变化才会触发事件）
//用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...
- Js/jQuery实时监听input输入框值变化
前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...
- 实时监听input输入的变化（兼容主流浏览器）【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- [转] 实时监听input输入的变化（兼容主流浏览器）
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
随机推荐
- struts2之输入验证
输入校验主要分为两种: 基于客户端的校验: 客户端校验主要作用是防止正常浏览者的误输入,仅能对输入进行初步过滤:对于一些用户恶意行为,客户端校验则无能为力. 基于服务端的校验: 服务器接收客户端提交的 ...
- 使用MyEclipse/Eclipse修改项目名称报Can't convert argument: null！
报错: java.lang.IllegalArgumentException: Can't convert argument: null! 方法/步骤 报错原因:使用MyEclipse修改项目名 ...
- pytorch中词向量生成的原理
pytorch中的词向量的使用 在pytorch我们使用nn.embedding进行词嵌入的工作. 具体用法就是: import torch word_to_ix={'hello':0,'world' ...
- 解答室内定位技术新方向：蓝牙AoA定位，值得了解 ——概念了解
转载搜狐 室内定位一直被炒的非常火的黑科技,也是近年资本追逐的热点,市场上一直有众多宣称可以做到厘米级,米级精度定位的公司,但问题很多,无法大规模商用.近些年有很多人尝试使用蓝牙beacon方式做定位 ...
- Wannafly挑战赛4. B
Wannafly挑战赛4. B 题意:求子区间异或和,要求区间长度在l到r之间,并且为偶数 题解:对于每一位算贡献,可以分奇偶来记录,计算的时候只加上奇偶性相同的就保证了为偶数,从大于l的点开始每次+ ...
- C# 在窗口绘制图形（打点、画圆、画线）
需要包含命名空间 using System.Drawing; 画图前需要先创建画板 void Display() { Graphics g = this.CreateGraphics(); //创建画 ...
- poj 3087 直接模拟
题意:意思就是,s1,和s2两堆牌,然后先s2一张再s1,最后会出现一个s12序列,例如s1 AHAH S2 HAHA 然后s12为HAAHHAAH,然后前面一部分给s1,后面一部分给s2,然后再重复 ...
- Azure Cloud Service - PaaS
使用Azure Cloud Service有一段时间了,前阵子在公司内部做一个Cloud Service培训的时候就在想,能不能用一幅图把Cloud Service所涉及的概念都罗列出来.于是就有了下 ...
- MyBatis---简单关系查询
联合查询 <!-- 处理关系查询相关的复杂返回数据类型(本例中未曾用到) --> <resultMap type="SchoolStudent" id=" ...
- Hibernate---实体类注释简介
1.类级别注解 @Entity:映射实体类 @Entity(name="tableName") - 必须,注解将一个类声明为一个实体bean. 属性: name - 可选,对应数据 ...