首页 > 代码库 > m站页面input keyup兼容性

m站页面input keyup兼容性

2024-08-07 07:34:42   222人阅读

我们经常遇到字数统计、搜索请求的业务需求，一般需要监听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

m站页面input keyup兼容性


联系
我们