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

posted @ 2014-12-10 21:03  kinnjee  阅读(895)  评论(0编辑  收藏  举报