• 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在此

  • 相关阅读:
    System.ServiceModel.CommunicationException:The underlying connection was closed: The connection was closed unexpectedly
    研究jBPM和NetBPM
    研究:Microsoft Solution Framework
    iOS银联,支付宝,微信,ping++开发文档
    Xampp+Openfire+Spark的简单使用
    ObjectiveC与Swift混编
    网络抓包教程
    iOS版微信开发小结(微信支付,APP跳转微信公众号)
    七牛上传图片问题总结
    2012年之总结
  • 原文地址:https://www.cnblogs.com/jesse007/p/5627167.html
Copyright © 2020-2023  润新知