zoukankan      html  css  js  c++  java
  • 为TextArea添加maxlength属性

     TextArea添加maxLength属性,在网上找了好多方法,可是虽然实现了限制长度,但是总是长按键盘或者粘贴的时候就会先显示上边然后再消失,总是闪烁一下,好纠结,于是就写了一个这个,基本上已经不闪烁了,谷歌,IE、搜狗高速兼容已测试,没问题~~~后续将整理出来一个JQuery插件来使用。

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head>
     3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     4     <title></title>
     5     <script>
     6 
     7         function doKeyPress(obj, evt) {
     8             maxLength = obj.getAttribute("maxlength");
     9             var e = window.event ? event.keyCode : evt.which;
    10             if ((e == 32) || (e == 13) || (e > 47)) {
    11                 //IE
    12                 if (maxLength && (obj.value.length > maxLength - 1)) {
    13                     if (window.event) {
    14                         var oTR = obj.document.selection.createRange();
    15                         if (oTR.text.length > 0) {
    16 
    17                         } else {
    18                             window.event.returnValue = null;
    19                         }
    20                     }
    21                     else {
    22                         evt.cancelDefault;
    23                         return false;
    24                     }
    25                 }
    26             }
    27         }
    28 
    29         function doKeyUp(obj) {
    30             maxLength = obj.getAttribute("maxlength");
    31             if (maxLength && obj.value.length > maxLength) {
    32                 obj.value = obj.value.substr(0, maxLength);
    33             }
    34             sr = obj.getAttribute("ShowLength");
    35             if (sr) {
    36                 //        alert((maxLength - obj.value.length));
    37                 document.getElementById(sr).innerHTML = "可填 <em style='color:#CC3300;'>" + (maxLength - obj.value.length) + "</em> 字";
    38             }
    39         }
    40 
    41         // 取消默认行为和创建一个新的粘贴程序
    42         function doPaste(obj) {
    43             maxLength = obj.getAttribute("maxlength");
    44             if (maxLength) {
    45                 var detect = navigator.userAgent.toLowerCase();
    46                 if ((window.event) && (detect.indexOf("safari") + 1 == 0)) {
    47                     //IE
    48                     var oTR = obj.document.selection.createRange();
    49                     var iInsertLength = maxLength - obj.value.length + oTR.text.length;
    50                     try {
    51                         var sData = window.clipboardData.getData("Text").substr(0, iInsertLength);
    52                         oTR.text = sData;
    53                     }
    54                     catch (err) {
    55                     }
    56                     if (window.event) {
    57                         //IE
    58                         window.event.returnValue = false;
    59                     }
    60                     else {
    61                         //not IE
    62                         obj.value = obj.value.substr(0, maxLength);
    63                         return false;
    64                     }
    65                 }
    66             }
    67         }
    68     </script>
    69 </head>
    70 <body>
    71     <textarea rows="6" cols="50" maxlength="10" onkeyup="doKeyUp(this)" onkeypress="doKeyPress(this,event)"
    72         onpaste="doPaste(this)" showlength="mes"></textarea>
    73     <br />
    74     <span id="mes"></span>
    75 </body>
    76 </html>


    作者:ゞ修ζ止符℡_R
    出处:http://www.cnblogs.com/lollipop/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,如有问题,可以通过394406480@qq.com  联系我,非常感谢。

  • 相关阅读:
    弹性布局、动画、过渡
    HTML
    数据库对象
    函数
    oracle与PL/SQL安装
    网络编程
    多线程
    联调接口
    vue 全局变量
    vue ajax请求
  • 原文地址:https://www.cnblogs.com/lollipop/p/3122632.html
Copyright © 2011-2022 走看看