在项目的开发过程中,相信大家都处理过监听用户输入的事情,一般我们会用到onkeyup、onkeydown、onkeypress、onchange、oninput事件,虽然都很熟悉了,但是还是有必要巩固一下。
onkeyup 在当前元素上释放键盘按键时触发
onkeydown 当用户按下键盘是会触发
onkeypress 当用户在键盘上按下某个键(不是所有的键都会触发,比如ctrl)以后会触发(safari上测试,回退等键不会触发)
oninput 当input元素的value属性发现变化时触发,该事件是冒泡的,如果window对象支持该事件,input元素同样也支持。
为了方便大家测试,写了一个demo
在这里我还是想讲下事件处理的流程以及事件响应和事件监听,因为我经常搞混。
大家都知道事件处理有三个阶段,捕获阶段、目标阶段、冒泡阶段
事件捕获从上到下依次触发元素事件监听(如果支持该事件)-----直到目标元素结束(可见这种事件处理方式并不是我们想要的)
事件冒泡从目标元素开始触发事件监听,然后开始向上依次触发元素事件监听----直到最顶层结束(这是最合理的事件处理方式,大多数情况下都这样处理)
定义:
1.事件流
描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。(事件处理顺序)
2.事件
就是用户或浏览器自身执行的某种动作。诸如click(点击)、load(加载)、mouseover(鼠标悬停)。(我所说的事件响应)
3.事件处理程序
响应某个事件的函数就叫事件处理程序(或事件侦听器)。(我所说的事件监听)
关于事件事件处理阶段写了一个demo,相信大家一看就懂了。
好了,下面进入正题,关于input事件在中文输入法时的表现。
~~搜索联想功能,大家应该都不陌生吧,不熟悉的可以去看看百度的搜索就知道了,实现的原理很简单。
监听搜索框的input事件,获取用户输入的内容传给后台------获取后台返回的结果并展示
如果是输入的纯英文很nice,没什么问题,但是输入中文呢。。
比如我想搜个“我的世界”,返回的第一个结果应该是“我”这个关键字返回的搜索结果对吧,但是并不是,返回“w”的搜索结果,原因想必大家都知道。
其实这个不是很大的问题,百度还不是这样的,跟后台勾搭一下,就这样样子吧,没啥影响,ok,搞定!
。。。。。
哈哈哈,上面只是开个玩笑,这个问题虽然不是那么重要,但是闲暇之余还是可以研究研究嘛。然后一阵google。
当当当。。。可以采用compositionstart和compositionend来捕获IME(input method editor)的启动和关闭事件。说实话,这两事件听都没听过,但是我们还是写个demo来试试吧。
$("#keyup,#keydown,#keypress,#change,#input").on("click",function(){ var oevent=this.id; $("#oinput").off().on({ oevent:function(e){ }, compositionstart:function(){ $("#result").text("中文输入:开始") }, compositionend:function(){ $("#result").text("中文输入:结束") } }) //alert(oevent) })
demo在此