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

  • 相关阅读:
    项目中的注意事项
    复合查询
    树型控件的处理(完整版)
    图的存储结构(邻接矩阵)
    图的定义与术语2 数据结构和算法55
    图的存储结构(邻接矩阵)
    赫夫曼编码 数据结构和算法52
    赫夫曼编码 数据结构和算法52
    图的存储结构(邻接矩阵)
    图的定义与术语 数据结构和算法54
  • 原文地址:https://www.cnblogs.com/kinnjee/p/4156295.html
Copyright © 2011-2022 走看看