移动端、手机网站中文输入法下keyup事件部分按键无效

微信公众平台开发时，客户提需求“输入框中输入内容时，输入框后边显示清除按钮，清除输入框中的内容”，使用“keyup”事件时在中文输入法下部分按键keyup事件无效， 以下为解决方案。

绑定“input”和“propertychange”事件可以解决，以下为代码：

    var bind_name="input";//定义所要绑定的事件名称
    if(navigator.userAgent.indexOf("MSIE")!=-1) bind_name="propertychange";//判断是否为IE内核 IE内核的事件名称要改为propertychange
    /*输入框键盘离开事件绑定*/
    $("input").bind(bind_name,function(){
        if(this.value!=null&&this.value!=""){
            var inputWidth=$(this).outerWidth();
            var inputHeight=$(this).outerHeight();
            var inputOffset =  $(this).offset();
            var inputTop=inputOffset.top;
            var inputLeft=inputOffset.left;
            $("#clearDiv").css({top:inputTop+2,left:inputLeft+inputWidth-27}).show();
            inputObj=this
        }else{
            $("#clearDiv").hide();
        }
    });

另外网上还有另一种解决方案，具体思路为给输入框注册focus事件，隔段时间去检索下，我个人还是比较倾向于上面那种方法的，以下为第二种方案代码：

<script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script>

    $(function () {
        $('#wd').bind('focus',filter_time);
    })

    var str = '';
    var now = ''
    filter_time = function(){
        var time = setInterval(filter_staff_from_exist, 100);
        $(this).bind('blur',function(){
            clearInterval(time);
        });
    };

    filter_staff_from_exist = function(){
        now = $.trim($('#wd').val());
        if (now != '' && now != str) {
            console.log(now);
        }
        str = now;
    }
    </script>

 我倾向于前一种方法，用focus和blur容易出错，我的代码是：

      var bind_name = 'input';
                if (navigator.userAgent.indexOf("MSIE") != -1) {
                    bind_name = 'propertychange';
                }
                if(navigator.userAgent.match(/android/i) == "android")
                {
                    bind_name = "keyup";




                }
               
           $("#search_content").bind(bind_name, function (event) {

                event.stopPropagation();
                if ($("#search_content").val() == "") {
                  
                    $("#UlContent li").remove();
                    $("#content").hide();
                    $("#SearchResult").hide();
                }
                else {

                    if (CheckChinese($("#search_content").val()) != "")
                        $("#content").show();


                }
                if (CheckChinese($("#search_content").val())) {
                    $.ajax({
                        type: "POST",
                        anync: true,
                        url: "HelpCenterSuggestion.ashx",
                        cache: false,
                        dataType: "text",
                        data: { m: $("#search_content").val() },
                        success: function (result) {
                            //alert(result);

                            $("#UlContent li").remove();
                            $("#UlContent li").removeAttr("padding");
                             $("#UlContent").append(result);
                                $("#SearchResult").show();
                   
                          

                        }

                    });
                }

            });

这里为了考虑苹果，android的情况还要触发不同事件，红米和小米的keyup没有问题，但是苹果的ios不按换行是不会搜索关键字，只能绑定propertychange，这个问题在javascript冒泡事件中多次被提及，但是关键这里还有一个样式问题，很有意思，当初有获得焦点设置一个大几号的字，但是由于考虑设计需求，去掉了这个样式，导致红米和小米android中无法显示获得焦点，即字可以输入但是输入框里内容出不来，最后还是增加了字号，只是获得焦点和不获得焦点都是一个字号。

<span style="color:#333333;">#search input[type="text"]{
  background: url(http://j5.dfcfw.com/image/201510/20151014122746.png) no-repeat 8px 5px #FFF;
  border: 0 none;
  /*border:-5px -5px -5px -5px;*/
  
  /*font: normal 14px "microsoft yahei",Arial,sans-serif;*/

  color: #CCCCCC;
  </span><span style="color:#ff0000;"> font-size:14px;</span><span style="color:#333333;">
  width:96%;
   margin:5px 5px 5px 5px;
  height:29px;
  padding: 10px 5px 10px 42px;
  border-radius: 8px 8px 8px 8px;
  box-sizing:border-box;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;*/
  /*transition: all 0.8s ease 0s;*/
}
/* 定义focus下的CSS，这里定义输入框宽度变化 */
#search input[type="text"]:focus{
  background: url(http://j5.dfcfw.com/image/201510/20151014122746.png) no-repeat 8px 5px #FFF;
  color:#6a6f75;
 
  vertical-align:middle;
  </span><strong><span style="color:#ff6666;">font-size:14px;</span></strong><span style="color:#333333;">
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;*/
  width:96%;
}</span>

里面红色的两个如果不设置，在红米和小米会不显示。