input事件以及中文输入法的处理

在项目的开发过程中，相信大家都处理过监听用户输入的事情，一般我们会用到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在此

转载于:https://www.cnblogs.com/jesse007/p/5627167.html