搜索框依据用户输入的值实时检索，一开始自然而然想到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. Borg Maze(bfs+prim)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6971   Accepted: 2345 Description The B ...

  2. 【转】Eclipse导入library的时候报：Found 2 versions of android-support-v4.jar in the dependency list

    原文网址:http://www.07net01.com/2015/03/779691.html 错误类型:Eclipse导入library的时候报:Found 2 versions of androi ...

  3. （转载）Python 列表(list)操作

    (转载)http://blog.csdn.net/facevoid/article/details/5338048 创建列表sample_list = ['a',1,('a','b')] Python ...

  4. bzoj3573[Hnoi2014]米特运输

    http://www.lydsy.com/JudgeOnline/problem.php?id=3573 好吧,虽然这是day1最后一题,但却是最水的一题....(前提:看懂题目) 仔细看题! 仔细看 ...

  5. Android之路-------Activity的详解

    前言 由于接近放假,公司在赶项目所以前段LP比较忙,没什么时间总结和写博客,只是准备睡觉的时候看看书,每天看的不算多,大概10多页左右吧,不过每天坚持如此的话那也是一个庞大的数字. 今天LP的任务完成 ...

  6. 链接器（linker）的作用——CSAPP第7章读书笔记

    首先说说我为什么要去读这一章.这个学期开OS的课,在Morden Operating System上读到和Process有关的内容时看到这样一句话:“Process is fundamentally ...

  7. 线段树解Insertion Sort Advanced Analysis

    题目出处 题意描述: 这个题目提问的是,在插入排序的序列给定的情况下,求最少需要移动的次数. 序列的长度n <=10^5 序列中的元素a[i] <=10^6 一组数据中case数t < ...

  8. C++标准库之 Lower_Bound, upper_Bound

    关于二分查找,这绝对是最简单却又最难的实现了,其各种版本号能够參见http://blog.csdn.net/xuqingict/article/details/17335833 在C++的标准库中,便 ...

  9. [转] java中注解的使用与实例

    注解目前非常的流行,很多主流框架都支持注解,而且自己编写代码的时候也会尽量的去用注解,一时方便,而是代码更加简洁. 注解的语法比较简单,除了@符号的使用之外,它基本与Java固有语法一致.Java S ...

  10. Android 百度地图 SDK v3.0.0 （二） 定位与结合方向传感器

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37730469 在上一篇博客中,我们成功把地图导入了我们的项目.本篇我们准备为地图 ...