零基础学做网站培训介绍

当前位置:

jquery实现input输入框输入时触发事件

input输入框输入时触发事件就是当用户在input输入框中输入任意内容时,就会触发某个事件,这在做网站过程中经常会用于制作输入内容时解决点击按钮。

input输入框

实现input输入框实时输入触发事件,可以使用jquery实现的,HTML代码如下:


<input id="productName" name="productName" class="wid10" type="text" value="" />

jquery代码如下:


$('#productName').bind('input propertychange', function() {
searchProductClassbyName();
});

代码中searchProductClassbyName 为触发后调用的方法;

除此之外,jquery针对于input输入框触发事件还有以下的事件。

(1)jquery 绑定事件

目前1.7以上,jquery的事件绑定已经用on替换了原来的bind;

区别:(个人理解)bind是一次绑定事件到每一个子节点;on是只绑定到父节点,然后冒泡到各个子节点;

用法:bind
一个事件,一个方法:$(".class input").bind('click',function(e){...;e.stopPropagation;})
两个事件,一个方法:$(".class input").bind('click mouseover',function(e){...;e.stopPropagation;})
两个事件,两个方法:$(".class input").bind({ click:function(e){...;e.stopPropagation;}, mouseover:function(e){...;e.stopPropagation;} })
on,可以直接替换掉bind,就是说上述的用法都适用于on;
此外,on比bind多了两个可选参数


on( events [, selector ] [, data ], handler(eventObject) )

selector:要绑定的元素,上面的例子可以写成:$(".class").bind('click','input',function(e){...;e.stopPropagation;})
(需要注意的是,有一个事件不好用,就是'大便'ie下独有的事件:onpropertychange;
可以用:$(".class input").bind('propertychange',function(e){...;e.stopPropagation;})
没反应:$(".class").bind('propertychange','input',function(e){...;e.stopPropagation;})
)

data:传递给event.data的参数,$(".class").bind('click','input','123',function(e){alert(e.data/*123*/);e.stopPropagation;})

(2)input textare 事件

之前做一个文本框内容实时变化事件触发时,用onkeyup + onchange;但onchang必须在文本框失焦后才会触发,后来发现可以用
(if IE) onpropertychange + else oninput 来处理。

说明:
oninput 事件在用户输入、退格、删除、剪切、粘贴及鼠标剪切与粘贴时触发(在 IE9&IE9+ 中可能略有区别)。
(Firefox、Chrome、IE9&IE9+ 均支持)
onpropertychange 事件在用户输入、退格、删除、剪切、粘贴及鼠标剪切与粘贴时触发
(仅 IE 支持)。

(3)常用事件

  • oncut 事件在粘贴(ctrl + v)、鼠标粘贴时触发
  • onactivate 当对象设置为活动元素时触发。
  • onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
  • onbeforeactivate 对象要被设置为当前元素前立即触发。
  • onbeforecut 当选中区从文档中删除之前在源对象触发。
  • onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
  • onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
  • onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
  • onbeforeupdate 当成功更新数据源对象中的关联对象前在数据绑定对象上触发。
  • onblur 在对象失去输入焦点时触发。
  • onchange 当对象或选中区的内容改变时触发。
  • onclick 在用户用鼠标左键单击对象时触发。
  • oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
  • oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
  • oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
  • ondblclick 当用户双击对象时触发。
  • ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
  • ondrag 当进行拖曳操作时在源对象上持续触发。
  • ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。
  • ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
  • ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
  • ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
  • ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。
  • ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
  • onerrorupdate 更新数据源对象中的关联数据出错时在数据绑定对象上触发。
  • onfilterchange 当可视滤镜更改状态或完成转换时触发。
  • onfocus 当对象获得焦点时触发。
  • onfocusin 当元素将要被设置为焦点之前触发。
  • onfocusout 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
  • onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
  • onkeydown 当用户按下键盘按键时触发。
  • onkeypress 当用户按下字面键时触发。
  • onkeyup 当用户释放键盘按键时触发。
  • onlosecapture 当对象失去鼠标捕捉时触发。
  • onmousedown 当用户用任意鼠标按钮单击对象时触发。
  • onmouseenter 当用户将鼠标指针移动到对象内时触发。
  • onmouseleave 当用户将鼠标指针移出对象边界时触发。
  • onmousemove 当用户将鼠标划过对象时触发。
  • onmouseout 当用户将鼠标指针移出对象边界时触发。
  • onmouseover 当用户将鼠标指针移动到对象内时触发。
  • onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
  • onmousewheel 当鼠标滚轮按钮旋转时触发。
  • onmove 当对象移动时触发。
  • onmoveend 当对象停止移动时触发。
  • onmovestart 当对象开始移动时触发。
  • onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
  • onpropertychange 当在对象上发生对象上发生属性更改时触发。
  • onreadystatechange 当对象状态变更时触发。
  • onresize 当对象的大小将要改变时触发。
  • onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
  • onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
  • onselect 当当前选中区改变时触发。
  • onselectstart 对象将要被选中时触发。
  • ontimeerror 当特定时间错误发生时无条件触发,通常由将属性设置为无效值导致

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在实现做网站过程中,我们需要经常在自己的网站中添加一个表单。表单里有很多的input输入框,为了用户体验的需要,可以在input框中添加一些提示文字。
  • INPUT是制作网站中的填写框的元素,例如制作提交表单中的填写框,都是使用INPUT标签。常用实例代码:[cce_html]<input value="www.xuewang
  • 问:请问一下html空格代码是什么?答:说到html空格代码很多人都会想到&nbsp,其实这也是表示html空格的一种方法,当我们输入十个&am
  • input输入框输入时触发事件就是当用户在input输入框中输入任意内容时,就会触发某个事件,这在做网站过程中经常会用于制作输入内容时解决点击按钮。
  • 在之前的建站教程中,我们讲了如何制作网页滚动显示效果,方法见:网站animite动画载入效果制作步骤,通过 WOW.js 制作滚动动画。今天给大家介绍
  • 给button按钮添加弹出窗口,最简单的方法就是给按钮绑定一个javascript事件,代码如下:[cce_js]<a href = "javascript:alert('此为会员建站课程
  • jQuery为多个元素绑定同一个事件的目的是当触发一个事件后,会同时影响多个元素,这样可以减少代码里,不用分开绑定事件了。下面是jQuery为多个元