搜索框依据用户输入的值实时检索，一开始自然而然想到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. poj 2031Building a Space Station

    http://poj.org/problem?id=2031 #include<cstdio> #include<cstring> #include<cmath> ...

  2. 改进了UI的界面

    小峤提醒我,千万要记住, 调用JS之前,一定要先加载哟~~~ <!--[if lt IE 9]> <script src="/static/js/jquery1.11.1. ...

  3. MappedByteBuffer高速缓存文件、RandomAccessFile随机访问

    说到高速缓存存储,处理读写文件,那就不得不说MappedByteBuffer. 看了好多文章以后写一下自己的总结. 在这里先介绍一下相关的类与方法. 先说一下Buffer.ByteBuffer.Map ...

  4. POJ1328 Radar Installation(贪心)

    题目链接. 题意: 给定一坐标系,要求将所有 x轴 上面的所有点,用圆心在 x轴, 半径为 d 的圆盖住.求最少使用圆的数量. 分析: 贪心. 首先把所有点 x 坐标排序, 对于每一个点,求出能够满足 ...

  5. HDU 2389 Rain on your Parade

    大意:在一个二维坐标系上有nx个人和ny把伞,每个人都有自己的移动速度,问有多少人可以再 time 时间内移动到不同的雨伞处(不允许两个人共用一把伞).   输入数据: 第一行是一个T代表T组测试数据 ...

  6. Servlet&JSP中的知识点

    先sun提出的是Servlet体系,这个体系使得使用JAVA的程序员也能开发基于B/S架构的WEB应用程序,使用Servlet类将HTTP请求和响应封装在标准JAVA类中来实现各种WEB应用方案.随着 ...

  7. Number of 1 Bits——LeetCode

    Write a function that takes an unsigned integer and returns the number of ’1' bits it has (also know ...

  8. Semaphore — Windows API

    Semaphore是旗语的意思,在Windows中,Semaphore对象用来控制对资源的并发访问数.Semaphore对象具有一个计数值,当值大于0时,Semaphore被置信号,当计数值等于0时, ...

  9. King's Quest - poj 1904（强连通分量+外挂输入输出）

    题意:国王有N个儿子,每个儿子都有很多喜欢的姑娘,官员为每个王子都找了一个姑娘让他们结婚,不过国王不满意,他想知道他的每个儿子都可以和那个姑娘结婚(前提他的儿子必须喜欢那个姑娘) 分析:因为最下面一行 ...

  10. linux上使用netstat查看当前服务和监听端口

    netstat这个命令常用在网络监控方面.利用这个命令,可以查看当前系统监听的服务和已经建立的服务,以及相应的端口.协议等信息. netstat参数说明 netstat参数虽然很多,但是常用的不多,主 ...