zoukankan      html  css  js  c++  java
  • 移动端(html5)微信公众号下用keyup实时监控input值的变化无效

    搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有,

    问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路,

    问题2:微信公众平台开发时,客户提需求“输入框中输入内容时,输入框后边显示清除按钮,清除输入框中的内容”,使用“keyup”事件时在中文输入法下部分按键keyup事件无效,

    方法一:主要是给搜索框注册focus事件,隔个时间去检索下,贴出代码

    1. <script language="javascript" type="text/javascript" src="jquery.js"></script>  
    2.     <script>  
    3.   
    4.     $(function () {  
    5.         $('#wd').bind('focus',filter_time);  
    6.     })  
    7.   
    8.     var str = '';  
    9.     var now = ''  
    10.     filter_time = function(){  
    11.         var time = setInterval(filter_staff_from_exist, 100);  
    12.         $(this).bind('blur',function(){  
    13.             clearInterval(time);  
    14.         });  
    15.     };  
    16.   
    17.     filter_staff_from_exist = function(){  
    18.         now = $.trim($('#wd').val());  
    19.         if (now != '' && now != str) {  
    20.             console.log(now);  
    21.         }  
    22.         str = now;  
    23.     }  
    24.     </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.   
    14. <body>  
    15.     <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />  
    16. </body>  


    最后需要注意的是:oninput 和 onpropertychange 这两个事件在 IE9 中都有个小BUG,那就是通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发,而 IE 其他版本都是正常的,目前还没有很好的解决方案。不过 oninput & onpropertychange 仍然是监听输入框值变化的最佳方案..

  • 相关阅读:
    go 语言之fmt.Sprintf格式化使用
    golang 中string和int类型相互转换
    GO 获取时间的日期函数、时间戳函数
    go 字符串切割方法小结
    php获取中英文字符串字符长度mb_strlen,字节长度strlen
    linux 之 grep 命令
    linux 无界面环境安装chrome,chromedriver,selenium
    kafka 常用命令总结
    linux中系统中 /bin、/sbin、/usr/bin、/usr/sbin、/usr/local/bin、/usr/local/sbin 目录的含义及区别
    3306端口被占用导致MySQL无法启动
  • 原文地址:https://www.cnblogs.com/timejs/p/4269028.html
Copyright © 2011-2022 走看看