Jquery实时监听input value

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body id="lia-body">
	<div class="lia-content">
		<div class="inputwrapper">
			<label><span>姓名:</span><input type="text" name="fullname"></label>
			<div class="result"></div>
		</div>
	</div>
	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
		$(function(){
			var $inputwrapper = $(‘#lia-body .lia-content .inputwrapper‘);
			$inputwrapper.find(‘input‘).on(‘input propertychange‘,function(){
				var result = $(this).val();
				console.log(result);
				$inputwrapper.find(‘.result‘).html(result);
			});
		})
	</script>
</body>
</html>

onchange触发事件必须满足两个条件:
1)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
2)当前对象失去焦点(onblur);
onpropertychange

只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;

oninput是onpropertychange的非IE版本,支持firefox和opera等浏览器

但不同的是,它绑定于对象时,并非该对象所有属性改变都能触发事件,只有在对象的value值发生改变时才会生效。

这里我们用来监听input value的改变再好不过了。

时间: 2024-08-11 14:48:13

Jquery实时监听input value的相关文章

使用jQuery实时监听input输入值的变化

//jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = $(this).val(); console.log(str); //alert(str); });

移动端用js与jquery实时监听输入框值的改动

背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android和iOS都可以触发的keyDown和keyUp. 于是,百度出了新东西:oninput![需要配合propertychange,兼容 IE9 以下版本] 用法: JS: if(isIE) { document.getElementById("input").onpropertychange

js/jquery 实时监听输入框值变化的完美方案:oninput &amp; onpropertychange

本文转载于 http://blog.163.com/lgh_2002/blog/static/44017526201341511112874/ Jquery绑定事件(bind和live的区别) js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange 2013-05-15 11:01:12|  分类: jquery/javascrip |

js 实时监听input中值变化

js 实时监听input中值变化 分类: Javascript2014-05-11 11:13 849人阅读 评论(0) 收藏 举报 [html] view plaincopyprint? <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS

实时监听input输入

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发.oninput 事件在主流浏览器的兼容情况如下: 从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接

js/jquery 实时监听输入框值变化的完美方案

js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange 解释:先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码:$('#username').bind('input propertychange', function() { $('#content').html($(this).val().length + ' characters');});

实时监听input输入的变化(兼容主流浏览器)

遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firefox等现代浏览器的input有oninput这一属性,可以用三种方式使用它: 1,内嵌元素方式(属性编辑方式) <input id="test" oninput="console.log('input');" type="text" />

[转] 实时监听input输入的变化(兼容主流浏览器)

遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firefox等现代浏览器的input有oninput这一属性,可以用三种方式使用它: 1,内嵌元素方式(属性编辑方式) <input id="test" oninput="console.log('input');" type="text" />

实时监听input输入框value的变化:

HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input> 或 <textarea> 元素的值发生改变时触发. 提示: 该事件类似于 onchange 事件.不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时才会触发.另外一点不同是 onchange 事件也可以作用于 <keygen> 和