我们经常遇到字数统计、搜索请求的业务需求，一般需要监听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);
时间： 2024-10-10 14:04:22