搜索框依据用户输入的值实时检索，一开始自然而然想到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. cf D. Maximum Submatrix 2

    http://codeforces.com/contest/376/problem/D 题意:给你一个矩阵,可以随意排列n行的次序,然后找出全部含有1的子矩阵.输出1的个数. 思路:c[i][j]表示 ...

  2. 【HDOJ】1078 FatMouse and Cheese

    这道题目是典型的DFS+记忆化搜索, DP思想.符合:含重叠子问题,无后效性等特点. #include <cstdio> #include <cstring> #include ...

  3. POJ3349 Snowflake Snow Snowflakes(哈希)

    题目链接. 分析: 哈希竟然能这么用.检查两片雪花是否相同不难,但如果是直接暴力,定会超时.所以要求哈希值相同时再检查. AC代码: #include <iostream> #includ ...

  4. win7配置iis 出现：HTTP 错误 403.14 - Forbidden

    打开 IIS 管理器. 在“功能”视图中,双击“目录浏览”. 在“目录浏览”页上,在“操作”窗格中单击“启用”. 确认站点或应用程序配置文件中的 configuration/system.webSer ...

  5. 信用卡/借记卡充值p2p平台

    第一部分信用卡/借记卡充值 首先信用卡尽量不要用于网贷,因为这样会有风险,对投资人和借款人都不利,况且银行的钱也不是那么好用的,对吧?但是也有很多朋友问我信用卡相关事宜,我在这里专门做个解答,信用卡用 ...

  6. Balanced Binary Tree——LeetCode

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  7. C语言---递归反向输出任意长度的字符串

    (该字符串可以包含空格和回车!) [题目要求] 编写一个递归函数,实现将输入的任意长度的字符串反向输出的功能. 例如输入字符串:ABCD,输出字符串:DCBA. [题目分析] 应用递归的思想有时可以很 ...

  8. cppunit学习笔记

    下载cppunit 链接:http://www.cnblogs.com/duxiuxing/p/4303809.html cppunit官方文档浅析 链接:http://www.cnblogs.com ...

  9. 聚焦设计交易与商业落地 DANG·DHUB设计师平台上线【图】_品牌资讯_服饰_太平洋时尚网

    聚焦设计交易与商业落地 DANG·DHUB设计师平台上线[图]_品牌资讯_服饰_太平洋时尚网 聚焦设计交易与商业落地 DANG·DHUB设计师平台上线

  10. F - True Liars - poj1417（背包+并查集）

    题意:有这么一群人,一群好人,和一群坏人,好人永远会说实话,坏人永远说假话,现在给你一组对话和好人与坏人的数目P1, P2. 数据里面的no是A说B是坏人, yes代表A说B是好人,就是这样,问题能不 ...