移动端、手机网站中文输入法下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>
时间: 2024-10-11 11:39:26

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

移动APP 中文输入法下的搜索优化

最近做了一个移动端的搜索功能,带有suggest.实现上并没有什么可说的,但是在后续优化上,特别是在中文输入法的情况下的优化使我学到一些新东西,所以决定写一篇文章. 下面是我简化后的基本功能实现,监听输入框的input事件,当搜索框有输入时,根据输入内容和后端进行交互提供suggest,再监听keyup的事件,当用户敲击回车的时候,就进行一次搜索.注意其中suggest和search是两个自定义事件,并非原生事件.我们在实际生产环境里应该给自定义事件加上特殊前缀. $('#searchInput

2015下半年移动端手机网站优化要点

前几天在我博客分享了一下怎么做移动端网站的开放适配以及如何禁止百度对网站进行转码,希望给各位站长带来一些帮助.经过很多站长的反应得知,其实还有很多人不知道该如何做移动端网站的基础建设,不知道如何设计一个移动端网站,今天我来根据做太原雅辉装修公司手机站的经验来分享一下:2015年移动端手机网站优化要点. 1.手机站定位和页面设计 手机站和PC站除了页面大小.展现形式不一样之外,在分析用户需求方面是都要做的.举个例子,对于一个本地的装修网站来讲,PC站是重点展现装修效果图案例.装修报价以及公司的装修

输入框文本输入限制问题以及中文输入法下字符阶段的处理

输入框文本字数限制问题以及中文输入法下字符截断处理 上次博文写过处理实时获取输入表单的值,传送门: 博文地址.这次又需要处理输入框文本字数限制问题,前期的步骤思想其实就是要先实时获取输入框的值然后得到长度. 使用onkeyup判断字符长度 可以参考我前面写的博文,地址如上.onkeyup确实是可以做到实时获取的效果,因此我就是使用键盘事件来达到效果.HTML代码: <div class="content"> <textarea name="complain&

HTML5移动端手机网站开发流程

最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网站罢了!至于为什么觉得难.觉得无从下手. 段亮觉得有以下几点: 一.没有完整的思路和流程 就像做网站的流程一样,如果你能知道它的流程,我相信就不会觉得做手机网站难!真正难的是你没有思路. 二.把html5这门技术想的高深莫测 好像觉得学会用html5+css3做手机网站,就相当于学会了顶尖的绝世武功

IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type="text" placeholder="请输入纳税人识别号" v-model="invBuyer.TaxCode" /> 文本框使用的是vue的v-model双向绑定,在android中是ok的,在IOS上不行, 导致问题出现的原因是IOS自带输入

移动端(html5)微信公众号下用keyup实时监控input值的变化无效

搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公众平台开发时,客户提需求“输入框中输入内容时,输入框后边显示清除按钮,清除输入框中的内容”,使用“keyup”事件时在中文输入法下部分按键keyup事件无效, 方法一:主要是给搜索框注册focus事件,隔个时间去检索下,贴出代码 <script language="javascript&quo

手机网站如何优化

从事网络营销的人员不会否认,移动互联网营销是一个大的趋势, 但是怎么样去做恐怕还都一筹莫展.由PC端的网络营销的经验和常识来看,首要的是要做好移动端手机网站的优化工作.据小生的观察以及众多互联网的数据分析 来看,目前国内的大多数并没有做好手机网站的优化,有的只是由PC端网站copy成简单的移动版本的wap网站,基本没有做优化. 据国内三 大运营商数据来看,中国的手机用户数已达10亿,超过2/5的移动用户每个月都会从手机终端访问网页.来自Company Data Trees的眼研究发现2011年1

html 富文本编辑器相关--中文状态下输入@的问题

如何支持输入@可以[@群内人]的功能? 常规思路是   监听keydown 事件  的shift+2 document.getElementById('input-content').addEventListener('keydown', function (e) { if (CHATOBJ.groupType != 2) {//不是群消息 return; } //if (e.keyCode === 16) return; console.log('没有弹出联系人?:',e); if (e.sh

类似baidu搜索 修正jquery的autocomplete在firefox下不支持中文输入法的bug

解决方法: 转自 =============================================================== http://blog.csdn.net/happymagic/article/details/8775123 =============================================================== jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomp