您的位置：首页 > 其它

兼容实时监测文本框内容的输入

2015-12-02 11:19 295 查看

最近有这么个需求：

文本框有最大字数限制，需要实时更新剩余的字数

于是想到了oninput和onpropertychange事件，可以检测 textarea, input:text, input:password 和 input:search 这几个元素的内容变化；

兼容性：

1 各主流浏览器及ie9+均支持oninput事件，但是在ie9下删除、剪切文字时不会触发。

2 ie8-支持onpropertychange事件

所以为了兼容，我们可以把这两个事件一起用，同时为了兼容ie9，我们还可以使用onkeydown事件。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
</head>
<style>
* {padding:0; margin:0;}
</style>
<body>

输入框：<input id="d1" type="text" /><br />
显示框：<input id="d2" type="text" readonly />

<script>

$("#d1").on("input propertychange", function() {
$("#d2").val($("#d1").val());
});

//兼容ie9删除、剪切操作
$(document).on("keyup", function(e) {
$("#d2").val($("#d1").val());
});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航