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

最新推荐文章于 2021-10-19 14:41:09 发布

vcxiaohan2

最新推荐文章于 2021-10-19 14:41:09 发布

阅读量1.1k

点赞数 1

分类专栏：兼容各浏览器

本文链接：https://blog.csdn.net/u011500781/article/details/50145751

版权

兼容各浏览器专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近有这么个需求：

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

于是想到了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>

vcxiaohan2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
兼容实时监测文本框内容的输入

最近有这么个需求：文本框有最大字数限制，需要实时更新剩余的字数于是想到了oninput和onpropertychange事件，可以检测 textarea, input:text, input:password 和 input:search 这几个元素的内容变化；兼容性：1 各主流浏览器及ie9+均支持oninput事件，但是在ie9下删除、剪切文字时不会触发。2 ie8-支持o
复制链接

扫一扫