搜索框依据用户输入的值实时检索，一开始自然而然想到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. CONTEXT MENU简介

    安卓中的上下文菜单是通过长按控件元素触发的,要注意的是每次都会触发onCreateContextMenu方法: main.xml <?xml version="1.0" en ...

  2. 生产环境下，不建议用早期版本的Mono........

    一个BUG修复需要4年!!!!!!!!!!!!!也是醉了....不造被微软收购后的Xamarin会不会好起来

  3. 【转】Android中的内存管理--不错不错，避免使用枚举类型

    原文网址:http://android-performance.com/android/2014/02/17/android-manage-memory.html 本文内容翻译自:http://dev ...

  4. 创建一个Android工程

    Creating an Android Project 原文演示了怎么通过Android Studio和命令行两种方式来创建一个Android工程. 原文链接:http://developer.and ...

  5. .net 安装remoting服务

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

  6. 一些提高开发效率的 Category

    最近工作陆续生产了一些方便开发的工具类,尽管最终没被收入使用,但不妨碍个人使用,故特此开一篇博文,也记录一些自己踩的坑. UIGestureRecognizer+Block 简单来说,你可以这样使用 ...

  7. Unity3D NGUI制作的Button放到场景中，按钮从2D变到3D

    通常我们使用Button都是在UI界面,即NGUI的摄像机下,如果想换到场景中,即不让按钮以UI形式显现,而是和场景中的物体一起随着摄像机移动而缩小,放大. 很简单,把Button从NGUi的摄像机中 ...

  8. SKNode类

    继承自 UIResponder:NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架  /System/Library/Frameworks/Sprit ...

  9. STK 10.1.3

    2692407267@qq.com.很多其它内容请关注http://user.qzone.qq.com/2692407267 STK 10.1.3与Qualnet联合仿真的demo

  10. java实现excel的导入导出（poi详解）[转]

    java实现excel的导入导出(poi详解) 博客分类: java技术 excel导出poijava  经过两天的研究,现在对excel导出有点心得了.我们使用的excel导出的jar包是poi这个 ...