Js/jQuery实时监听input输入框值变化

前言
在做web开发时候很多时候都需要即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。而采用onchange时间又往往是在输入框失去焦点（onblur）时候触发，有时候并不能满足条件。

首先看一下dom中元素事件：

onpropertychange： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。在用js脚本改动该元素值时候亦能触发onpropertychange事件。
oninput：是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。
onchange： (a)当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）；(b)当前对象失去焦点(onblur)；
jQuery用法
$("#input1").bind("input propertychange",function(event){
console.log($("#input1").val())
});

原生Js
<script type="text/javascript">
// Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
function OnInput (event) {
alert ("The new content: " + event.target.value);
}
// Internet Explorer
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
alert ("The new content: " + event.srcElement.value);
}
}
</script>
//Input标签
<input type="text" οninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

项目中遇到一个问题：在input上加了一个监听事件

$('#inputId').bind('input propertychange', function() {
dosomethig...
});

但我在使用Js改变这个input的值后，监听事件并不能触发

原因：

使用Js动态改变input的值时，没有任何鼠标和键盘的事件，所以并不能触发监听

解决：

在Js改变这个值之前加上一句话：$("#inputId").trigger("input"); 问题得以解决

转载于:https://www.cnblogs.com/jxldjsn/p/10917092.html

Js/jQuery实时监听input输入框值变化相关推荐

JavaScript 实时监听input 中值变化
JavaScript 实时监听input 中值变化在 <input> 标签中,添加属性 oninput ,oninput 事件在元素获得用户输入时发生. 当 <input> ...
js实时监听input输入框值的变化以便即使匹配搜索项
问题说明在含有搜索框的网页中,经常需要及时匹配搜索项,因此需要监听input输入框的变化事件.如果使用 onkeydown.onkeypress.onkeyup 这个几个键盘事件来监测的话,除了监听 ...
js 实时监听input中值变化
摘自:http://blog.csdn.net/spy19881201/article/details/25537225 示例: <!DOCTYPE html> <html> ...
实时监听 input输入框值的变化并响应动作
html <input type="text" id="id"> jquery $("#id").bind('input pro ...
实时监听input输入框value的变化：
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
JQUERY实时监听INPUT输入值
JQUERY方法: 方法原型: $(selector).bind(event,data,function,map) selector的语法参照jquery选择器语法参数描述 event 必需.规定 ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法
用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...
jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
java监听焦点事件_监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题...
1.问题描述当在监听input失去焦点的事件的时候,在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发 2. ...

Js/jQuery实时监听input输入框值变化

Js/jQuery实时监听input输入框值变化相关推荐

最新文章

热门文章