zoukankan      html  css  js  c++  java
  • m站页面input keyup兼容性

    我们经常遇到字数统计、搜索请求的业务需求,一般需要监听input的keyup事件,paste事件,

    在手机上也一样。比如说我们有一个id为J_input的input用来接收用户的输入,

    一个id为J_show的p用来实时显示用户的输入状态。js代码如下:

    var dInput = document.getElementById('J_input'),
        dShow = document.getElementById('J_show'),
        back = function(e){
            e.stopPropagation();
    
            dShow.innerText = dInput.value;
        };
    
    dInput.addEventListener('keyup', back, false);
    dInput.addEventListener('paste', back, false);

    完整的html代码为:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>input keyup事件兼容性</title>
        <style>
        *{margin:0; padding:0;}
        span strong{color:#FA0; font-family:Constantia, Georgia; font-size:32px;}
        </style>
    </head>
    <body>
    请这里输入:<input type="text" id="J_input" /><br/><br/>
    您输入的是:<span id="J_show">...</span>
    
    <script>
    var dInput = document.getElementById('J_input'),
        dShow = document.getElementById('J_show'),
        back = function(e){
            e.stopPropagation();
    
            var html = '',
                val = dInput.value,
                len = val.length;
    
            for(var i = 0; i < len; i++){
                var str = val[i];
    
                if(/^d$/.test(val[i])){
                    str = '<strong>'+ str +'</strong>';
                }
    
                html += str;
            }
    
            dShow.innerHTML = html;
        };
    
    dInput.addEventListener('keyup', back, false);
    dInput.addEventListener('paste', back, false);
    </script>
    </body>
    </html>

    now, 让我们进入今天的终点,手机端有些输入法(比如Anroid的百度输入法)对keyup没有响应,或是对中文输入无响应,这个时候我们需要添加oninput事件(哈哈,没听说过吧),

    这个事件类型,IE是不支持的,但是就像你所想的,IE总是有自己的一套,IE下对应的是事件是propertychange,意思就是属性值变化事件(value也是dom元素的一个属性啊)

    如此为了兼容手机端的各种不友好的输入法,我们在原先keyup,paste的基础上,再新增input和propertychange事件就好了;

    dInput.addEventListener('keyup', back, false);
    dInput.addEventListener('paste', back, false);
    dInput.addEventListener('input', back, false);
    dInput.addEventListener('propertychange', back, false);

    input events

  • 相关阅读:
    hdu 2485 Destroying the bus stations 迭代加深搜索
    hdu 2487 Ugly Windows 模拟
    hdu 2492 Ping pong 线段树
    hdu 1059 Dividing 多重背包
    hdu 3315 My Brute 费用流,费用最小且代价最小
    第四天 下载网络图片显示
    第三天 单元测试和数据库操作
    第二天 布局文件
    第一天 安卓简介
    Android 获取存储空间
  • 原文地址:https://www.cnblogs.com/kinnjee/p/4156295.html
Copyright © 2011-2022 走看看