搜索框依据用户输入的值实时检索，一开始自然而然想到keyup，在拼音状态时，啥问题也没有，

问题1：切换到中文输入法，问题出来了，keyup事件不灵便了，后来在网上搜了下，找到了思路，

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

方法一：主要是给搜索框注册focus事件，隔个时间去检索下，贴出代码

  1. <script language="javascript" type="text/javascript" src="jquery.js"></script>
  2. <script>
  3. $(function () {
  4. $('#wd').bind('focus',filter_time);
  5. })
  6. var str = '';
  7. var now = ''
  8. filter_time = function(){
  9. var time = setInterval(filter_staff_from_exist, 100);
  10. $(this).bind('blur',function(){
  11. clearInterval(time);
  12. });
  13. };
  14. filter_staff_from_exist = function(){
  15. now = $.trim($('#wd').val());
  16. if (now != '' && now != str) {
  17. console.log(now);
  18. }
  19. str = now;
  20. }
  21. </script>

方法二：用 input 和 propertychange事件可以解决，

本人测试只能用dom2的绑定方法使用 如 document.getElementById('box').addEventListener('input',function(){...dosomething...},false);

  1. html>
  2. <head>
  3. <script type="text/javascript" src="http://www.zlovezl.cn/static/js/jquery-1.4.2.min.js"></script>
  4. </head>
  5. <body>
  6. <p>
  7. 使用oninput以及onpropertychange事件检测文本框内容：
  8. </p>
  9. <p>
  10. <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/>
  11. <span id="inputorp_s"></span>
  12. <script type="text/javascript">
  13. //先判断浏览器是不是万恶的IE，没办法，写的东西也有IE使用者
  14. var bind_name = 'input';
  15. if (navigator.userAgent.indexOf("MSIE") != -1){
  16. bind_name = 'propertychange';
  17. }
  18. $('#inputorp_i').bind(bind_name, function(){
  19. $('#inputorp_s').text($(this).val());
  20. })
  21. </script>
  22. </p>
  23. </body>
  24. </html>

可是也有人说用jq方式绑定即可 如:

  1. $('#input').bind('input propertychange', function() {
  2. alert("....")
  3. });

或者原生：

  1. <script type="text/javascript">
  2. // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
  3. function OnInput (event) {
  4. alert ("The new content: " + event.target.value);
  5. }
  6. // Internet Explorer
  7. function OnPropChanged (event) {
  8. if (event.propertyName.toLowerCase () == "value") {
  9. alert ("The new content: " + event.srcElement.value);
  10. }
  11. }
  12. </script>
  13. <body>
  14. <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
  15. </body>

最后需要注意的是：oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG，那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发，而 IE 其他版本都是正常的，目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案..

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

  1. 使用vue开发微信公众号下SPA站点的填坑之旅

    原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...

  2. Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究

    ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index- ...

  3. 微信公众号和小程序可以共用access_token值吗？

    微信公众号和小程序可以共用access_token值吗? 答案:是不能的 因为两者都可通过统一接口(https://api.weixin.qq.com/cgi-bin/message/subscrib ...

  4. pc端引入微信公众号文章

    最近做了一个小需求,结果坑特别多..... 需求是这样的,要给公司内部做一个微信公众号广告投票系统,整个项目就不多赘述了,有个小功能,要求是这样的: 点击某条记录后的“投票”按钮,在当前页面弹出弹窗显 ...

  5. 使用FreeHttp强制登出微信公众号登陆状态（实现~原理）

    概述 我们使用的部分网站设计成一旦登录即不允许用户手动退出,现实场景中是没有问题的 但如果是在测试或调试过程中就会有强制登出的需求 如果当前使用的是PC浏览器,您或许可以通过调试模式清除保持登录信息的 ...

  6. Mac下进行基于java服务端语言的微信公众号本地js-sdk调试的大致方法

    开发微信公众号应用调用js-sdk,需要先在微信公众号后台配置可信域名,之后从微信的入口地址重定向到改域名下的路径后便会返回code,之后可以拿到一系列需要的参数等等.那么本地开发,如果使用的是PHP ...

  7. 微信公众号 几种移动端UI框架介绍

    微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计, ...

  8. “互联网+”背景下使用微信公众号增强班主任工作与整合教学资源（泰微课）

    前记:此文是我爱人一项作业.因为我本人对于微信这一块比较熟悉,就参与这项作业中.此文已经参加移动和教育相关活动.作者是我爱人,如有转载请署名作者. 一.什么是"互联网+"? 早在1 ...

  9. asp.net mvc下实现微信公众号（JsApi）支付介绍

    本文主要讲解asp.net mvc框架下公众号支付如何实现,公众号支付主要包括三个核心代码,前台调起支付js代码.对应js调用参数参数生成代码.支付成功处理代码. 一.微信支付方式介绍 微信提供了各种 ...

随机推荐

  1. SCALA表达示简例

    作了解,感觉比一般的差距有点大哟. package com.hengheng.scala class HelloScala { } object HelloScala { def main(args: ...

  2. java String字符串进行排序

    public String afterSort(String s){        char[] ss = s.toCharArray();        Arrays.sort(ss);       ...

  3. library cache lock

    SESSION 34 执行存储过程: SESSION 43 编译存储过程: SESSION 25 删除存储过程: 1.查询查看library cache lock等待事件的相关会话 SQL> s ...

  4. 【转】Android点击空白区域，隐藏输入法软键盘

    原文网址:http://www.2cto.com/kf/201505/401382.html 很多时候,我们在使用应用时,会出现输入法软键盘弹出的问题,通常情况下,我们默认会使用户点击返回键或者下一步 ...

  5. C# 实现文件或目录复制到指定目录

    public void CopyFilesToDirKeepSrcDirName(string srcPath, string destDir) { if (Directory.Exists(srcP ...

  6. HDOJ 1016 Prime Ring Problem素数环【深搜】

    Problem Description A ring is compose of n circles as shown in diagram. Put natural number 1, 2, -, ...

  7. LoadRunner基础入门教程

    原文地址:http://jingyan.baidu.com/article/215817f7dedfb01eda1423df.html 从LoadRunner英语字面上进行理解就是负载跑步者,为什么这 ...

  8. .net 安装remoting服务

    程序->vs2008->vs tools->vs2008 命令提示 D:\QidianWorkShop\Develop\Source\Services\Snda.Qidian.Hon ...

  9. 《Linear Algebra and Its Applications》-chaper2-矩阵代数-分块矩阵

    分块矩阵的概念: 在矩阵的实际应用中,为了形式的更加简化我们将一个较大的矩阵的内部进行一定的划分,使之成为几个小矩阵,然后在表大矩阵的时候,矩阵的内部元素就用小矩阵代替. 进行了这一步简化,我们就要分 ...

  10. UVALive 4959 Jumping monkey

    题意就是: 一个猎人在森林里捕猎. 然后有只猴子,喜欢躲树的后边,猎人看不见它 然后给出了一张图,表示有哪些树是相邻的. 数据保证任意图中两个树都可以直接或间接的到达 猎人有一个枪,每次他可以选择一颗 ...