移动端(html5)微信公众号下用keyup实时监控input值的变化无效
搜索框依据用户输入的值实时检索，一开始自然而然想到keyup，在拼音状态时，啥问题也没有，
问题1：切换到中文输入法，问题出来了，keyup事件不灵便了，后来在网上搜了下，找到了思路，
问题2：微信公众平台开发时，客户提需求“输入框中输入内容时，输入框后边显示清除按钮，清除输入框中的内容”，使用“keyup”事件时在中文输入法下部分按键keyup事件无效，
方法一：主要是给搜索框注册focus事件，隔个时间去检索下，贴出代码
- <script language="javascript" type="text/javascript" src="jquery.js"></script>
- <script>
- $(function () {
- $('#wd').bind('focus',filter_time);
- })
- var str = '';
- var now = ''
- filter_time = function(){
- var time = setInterval(filter_staff_from_exist, 100);
- $(this).bind('blur',function(){
- clearInterval(time);
- });
- };
- filter_staff_from_exist = function(){
- now = $.trim($('#wd').val());
- if (now != '' && now != str) {
- console.log(now);
- }
- str = now;
- }
- </script>
方法二：用 input 和 propertychange事件可以解决，
本人测试只能用dom2的绑定方法使用 如 document.getElementById('box').addEventListener('input',function(){...dosomething...},false);
- html>
- <head>
- <script type="text/javascript" src="http://www.zlovezl.cn/static/js/jquery-1.4.2.min.js"></script>
- </head>
- <body>
- <p>
- 使用oninput以及onpropertychange事件检测文本框内容：
- </p>
- <p>
- <input type="text" name="inputorp_i" id="inputorp_i" autocomplete="off"/>
- <span id="inputorp_s"></span>
- <script type="text/javascript">
- //先判断浏览器是不是万恶的IE，没办法，写的东西也有IE使用者
- var bind_name = 'input';
- if (navigator.userAgent.indexOf("MSIE") != -1){
- bind_name = 'propertychange';
- }
- $('#inputorp_i').bind(bind_name, function(){
- $('#inputorp_s').text($(this).val());
- })
- </script>
- </p>
- </body>
- </html>
可是也有人说用jq方式绑定即可 如:
- $('#input').bind('input propertychange', function() {
- alert("....")
- });
或者原生：
- <script type="text/javascript">
- // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
- function OnInput (event) {
- alert ("The new content: " + event.target.value);
- }
- // Internet Explorer
- function OnPropChanged (event) {
- if (event.propertyName.toLowerCase () == "value") {
- alert ("The new content: " + event.srcElement.value);
- }
- }
- </script>
- <body>
- <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />
- </body>
最后需要注意的是：oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG，那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发，而 IE 其他版本都是正常的，目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案..
移动端(html5)微信公众号下用keyup实时监控input值的变化无效的更多相关文章
- 使用vue开发微信公众号下SPA站点的填坑之旅
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...
- Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究
ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index- ...
- 微信公众号和小程序可以共用access_token值吗？
微信公众号和小程序可以共用access_token值吗? 答案:是不能的 因为两者都可通过统一接口(https://api.weixin.qq.com/cgi-bin/message/subscrib ...
- pc端引入微信公众号文章
最近做了一个小需求,结果坑特别多..... 需求是这样的,要给公司内部做一个微信公众号广告投票系统,整个项目就不多赘述了,有个小功能,要求是这样的: 点击某条记录后的“投票”按钮,在当前页面弹出弹窗显 ...
- 使用FreeHttp强制登出微信公众号登陆状态（实现~原理）
概述 我们使用的部分网站设计成一旦登录即不允许用户手动退出,现实场景中是没有问题的 但如果是在测试或调试过程中就会有强制登出的需求 如果当前使用的是PC浏览器,您或许可以通过调试模式清除保持登录信息的 ...
- Mac下进行基于java服务端语言的微信公众号本地js-sdk调试的大致方法
开发微信公众号应用调用js-sdk,需要先在微信公众号后台配置可信域名,之后从微信的入口地址重定向到改域名下的路径后便会返回code,之后可以拿到一系列需要的参数等等.那么本地开发,如果使用的是PHP ...
- 微信公众号 几种移动端UI框架介绍
微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计, ...
- “互联网+”背景下使用微信公众号增强班主任工作与整合教学资源（泰微课）
前记:此文是我爱人一项作业.因为我本人对于微信这一块比较熟悉,就参与这项作业中.此文已经参加移动和教育相关活动.作者是我爱人,如有转载请署名作者. 一.什么是"互联网+"? 早在1 ...
- asp.net mvc下实现微信公众号（JsApi）支付介绍
本文主要讲解asp.net mvc框架下公众号支付如何实现,公众号支付主要包括三个核心代码,前台调起支付js代码.对应js调用参数参数生成代码.支付成功处理代码. 一.微信支付方式介绍 微信提供了各种 ...
随机推荐
- 云方案，依托H3C彩虹云存储架构，结合UIA统一认证系统，实现了用户数据的集中存储和管理
客户的声音 资料云项目在迷你云基础上二次开发,通过使用云存储技术及文件秒传技术,对文件进行统一存储与管理,以达到节约文件管理成本.存储成本目的:通过有效的文件版本控制机制,以达到风险管控的目的:通过多 ...
- 关于windows service不能访问网络共享盘(NetWork Drive)的解决方案
我映射一个网络驱动器到本机的时候,发现本机的程序直接能访问读取网络驱动器,但是把本机的程序作为本机的windows服务运行的时候就不能访问了. Qt中的QDir::exist(folder)访问失败. ...
- java中利用RandomAccessFile读取超大文件
超大文件我们使用普通的文件读取方式都很慢很卡,在java中为我提供了RandomAccessFile函数,可以快速的读取超大文件并且不会感觉到卡哦,下面看我的一个演示实例. 服务器的日志文件往往达到4 ...
- Android AlarmManager实现不间断轮询服务
在消息的获取上是选择 轮询还是推送得根据实际的业务需要来技术选型,例如对消息实时性比较高的需求,比如微博新通知或新闻等那就最好是用推送了.但如果只是一般的消息检测比如 更新检查,可能是半个小时或一个小 ...
- POJ2242 The Circumference of the Circle（几何）
题目链接. 题目大意: 给定三个点,即一个任意三角形,求外接圆的周长. 分析: 外接圆的半径可以通过公式求得(2*r = a/sinA = b/sinB = c/sinC),然后直接求周长. 注意: ...
- -_-#【userAgent】极速模式与非极速模式存在差异
UC浏览器 Android 极速模式 UC浏览器 Android 非极速模式
- HttpContext之公交车
小编刚在路边晃攸了许久,好不容易才等到个公交车,想想真是不容易呀,这年代路边打的也打不到,坐个公交车也难等呀. 顺势一想,HttpContext不也是一输运行在web上的一辆公交车吗?公交车让我们成为 ...
- Oracle分页查询与RowNum
1. RowNum伪列 Oracle中,RowNum是一个伪列,表示当前记录是查询结果集中的第几条. RowNum在使用上应该注意,不能在where条件中用RowNum大于.大于等于.等于某个大于1的 ...
- heap(堆)和stack（栈）的区别
heap是堆,stack是栈 stack的空间由操作系统自动分配/释放,heap上的空间手动分配/释放. stack空间有限,heap是很大的自由存储区 C中的malloc函数分配的内存空间即在hea ...
- Java基础知识强化96：Calendar类之获取任意年份的2月有多少天的案例
1. 分析: (1)键盘录入任意的年份 (2)设置日历对象的年月日 年:就是(1)输入的数据 月:是2(3月份) 日:是1 (3)把 ...