按键无效"/>
移动端、手机网站中文输入法下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(.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(.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>
里面红色的两个如果不设置,在红米和小米会不显示。
更多推荐
移动端、手机网站中文输入法下keyup事件部分按键无效
发布评论