做搜索功能的时候,经常遇到输入框检查的需求,最常见的是即时搜索,今天好好小结一下。
即时搜索的方案:
(1)change事件 触发事件必须满足两个条件:
a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
b)当前对象失去焦点(onblur)
(2)keypress 恩,还好。。。。。就是能监听键盘事件,鼠标复制黏贴操作他就无能为力的赶脚了。。。。。
(3)propertychange(ie)和input事件
input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化
propertychange,只要当前对象属性发生改变。
比如一个input输入文字后出现下拉框,如图:
当输入框里面内容为空时,下拉框要隐藏,可以通过input和propertychange方法实现,代码如下:
- <script>
- $("#search").bind("input propertychange",function(){
- var value=$(this).val();
- if(value){
- $(".pc_search ul").show();
- }else{
- $(".pc_search ul").hide();
- }
- });
- </script>
这里bind同时绑定了input和propertychange两个方法。
======================================================
注意:
从jQuery 1.7开始,on()
函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。
// jQuery 1.0+ (1.4.3+支持参数data) $("selector").click([ data ,] handler ); // jQuery 1.0+ (1.4.3+支持参数data) $("selector").bind("click"[, data ], handler ); // jQuery 1.3+ (1.4+支持参数data) $("selector").live("click"[, data ], handler ); // jQuery 1.4.2+ $("ancestor").delegate("selector","click"[, data ], handler ); // jQuery 1.7+ $("ancestor").on("click","selector"[, data ], handler );
项目使用:
$("#buildYear").on('input propertychange',function () { var value=$(this).val(); if(value>=1900&&value<=2017){ $("a.ssq-error.buildYear").css({"padding-left":"0px"}); $("a.ssq-error.buildYear").html(""); $("#evaluate").removeAttr("disabled"); }else{ $("a.ssq-error.buildYear").css({"padding-left":"12px"}); $("a.ssq-error.buildYear").html("年代取值范围:1900-2017"); } });
相关推荐
主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下
还好有propertychange(IE)和oninput事件。 oninput是标准浏览器的事件,一般应用于input元素,当input的value发生变化时就会发生,无论是键盘输入还是鼠标粘贴的改变都能即时监听到。 浏览器兼容 IE9以下是不支持...
而在其他标准浏览器中(包括IE9),是点击后立即触发change事件的,这的确是个蛋疼的问题,说到解决方法,倒也比较容易,用IE(LTE8)中元素特有的propertychange事件来处理(IE9已经没这玩意儿了),就能避免上述问题,如...
$('.input-form :input').bind('input propertychange', function() { //获取.input-form下的所有 <input> 元素,并实时监听用户输入 //逻辑 }) 以上代码在因为用的bind,所以当遇到追加的新input标签时,...
挺炫的一个效果,百度和谷歌好像已实现好多年了,我以为...通过监听input和propertychange事件实现实时的改动监听,input是主流,propertychange是ie,你懂的;通过ajax实现post动作,把返回内容显示成类似选框的形式;
做一个输入框的字符统计,限制输入字符数量, 即在输入框的内容发生变化的时候改统计字符长度。 跟新浪微博一样,统计字符数量,不超过140字
用onpropertychange,oninput事件解决onchange事件的不足,需要的朋友可以参考下。
代码如下: //绑定商品名称联想 $(‘#productName’).bind(‘input propertychange’, function() {searchProductClassbyName();}); 代码如下: searchProductClassbyName 为触发后调用的方法; 实现效果:
.on('input propertychange', '#query', function(){ var input = $(this).val(); show(input); }); var show = function(txt){ var info = '监听:<b>' + txt + '</b><br> ' + '相关搜索: ' + show...
本文主要分享了jquery实现输入框实时输入触发事件的代码,代码简单易懂,需要的朋友一起来看下吧
今天做一张表单,要求行输入的时候,自动计算值,并且计算值的这一列,要自动合计。 开始用了onchange事件... 代码如下: $(“#textboxID”).bind(“propertychange”, function() { alert($(this).val()); });
如果是在pc端,监听输入框你可能想到focus、blur、hover、onkeyup...利用jquery提供的 input propertychange 事件监听,同时也是判断文本框长度变化,执行查询操作。 显然如果做类似实时响应的模糊查询时,貌似两个方
txt输入跨浏览器输入事件模块。 它也可以作为CommonJS / AMD模块来支持。用法该模块将在全局对象上公开一个名为... 本机事件对象是IE10 +和其他现代浏览器中的input事件对象,并且可能是IE6-9中的propertychange ,
每次属性值改变时,这种属性就触发一个PropertyChange事件(在Java程序中,事件也是一个对象)。事件中封装了属性名、属性的原值、属性变化后的新值。这种事件传递到其他的Bean,至于接收事件的Bean应该做什么动作由...
文本框的改变事件,可使用propertychange,例如: 代码如下: $(“#txtDataDate”).bind(“propertychange”,function(){ }); 2。获取被选中RadioButton 的值 代码如下: var radio_value = $(“input[type=radio]...
var bind_name = 'input';//默认事件 if (navigator.userAgent.indexOf("MSIE") != -1) { bind_name = 'propertychange';//不要脸IE独享的事件 } var maxlength = 10;//限定输入字数 $('#Comment').bind(bind_...
input ng-model=name> 你输入了: {{name}} 我就想着,使用jq/js怎么实现类似的效果,后来找找,发现使用propertychange可以实现。 JQ: <textarea></textarea> <div class=miss></div> $('...