超实用的JavaScript表单代码段

2019-11-20 10:30:16

字体：大中小

来源：转载

供稿：网友

整理了下比较实用的Javascript表单代码段，分享给大家供大家参考，具体内容如下

1 多个window.onload方法

　　由于onload方法时在页面加载完成后，自动调用的。因此被广泛的使用，但是弊端是只能实用onload执行一个方法。下面代码段，可以保证多个方法在Onload时执行：

 function addLoadEvent(func){  var oldonload = window.onload;  if(typeof window.onload != 'function'){   window.onload = func;  }else{   window.onload = function(){    oldonload();    func();   }  } }

2 正则表达式去空格

str.replace(/^(/s|/u00A0)+|(/s|/u00A0)+$/g,"");

3 利用正则过滤中文

str.replace(/[/u4e00-/u9fa5]/g,"");

4 禁止用户的拷贝和复制

xxx.oncopy = function(){ return false;}xxx.onpaste = function(){ return false;}

5 限制字符串长度（区分中英文）

　　主要思想：

　　需要3个数据：1 限制输入的长度；2 已经输入了多长； 3 截取多少个字符；

　　由于JS里面的截取方法不区分中英文，因此

　　“哈哈哈”.substr(0,2) ----> 哈哈

　　“haha”.substr(0,2) ---> ha

　　但是，如果按照编码一个汉字应该对应2个字符，一个字母对应一个字符。

　　因此统计真实长度时，应该是字符的长度 + 汉字的个数

　　例如我们限制输入5个字符：那么输入“哈哈”后，就只能输入一个h，不能再输入汉字了。代码参考如下，可以运行一下推敲推敲。

 <script type="text/javascript">  var strLen = (function(){//strlLength的功能相同，但是写法巨麻烦   return function(_str,_model){    _model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文为2个字符    var _strLen = _str.length; //获取字符串长度    if(_strLen == 0){     return 0;    }else{     var chinese = _str.match(/[/u4e00-/u9fa5]/g); //匹配中文     return _strLen + (chinese && _model == "Ch"?chinese.length:0); //为什么要&&？    }   }  })();  var strLength = function(_str,_model){   _model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文为2个字符   var _strLen = _str.length; //获取字符串长度   if(_strLen == 0){    return 0;   }else{    var chinese = _str.match(/[/u4e00-/u9fa5]/g); //匹配中文    return _strLen + (chinese && _model == "Ch"?chinese.length:0); //为什么要&&？   }  }  var funcRemainingCharacters = function(){   remainingCharacters = document.getElementById("remainingCharacters");   var clearRemainingCharacters = function(_this){    var _value = _this.value;    var _valueLength = _value.length;    var dataLength = _this.getAttribute("data-length");    var dataModel = _this.getAttribute("data-model");    var subLen = dataLength;    if(dataModel == "Ch"){//仅当开启Ch后，才对重新计算截取的长度     _valueLength = strLength(_value,dataModel);     var vv = _value.match(/[/u4e00-/u9fa5]/g); //当输入【哈哈】时，vv是["哈","哈"]数组     subLen = dataLength - (!vv?0:vv.length);    }    //_valueLength代表总共的字符长度，比如哈哈哈 为 6    //dataLength是我们定义的限制长度，比如 5    //subLen是计算的截取长度，当输入家具啊    if(_valueLength > dataLength){     _this.value = _value.substr(0,subLen);    }   }   remainingCharacters.onfocus = function(){    clearRemainingCharacters(this);   }   remainingCharacters.onkeyup = function(){    clearRemainingCharacters(this);   }   remainingCharacters.onblur = function(){    clearRemainingCharacters(this);   }  }  addLoadEvent(funcRemainingCharacters); </script>

全部代码：

<!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script type="text/javascript">  function addLoadEvent(func){    var oldonload = window.onload;    if(typeof window.onload != 'function'){     window.onload = func;    }else{     window.onload = function(){      oldonload();      func();     }    }   } </script></head><body> <p class="h3">（支持中英文区分）限制字符串长度</p> <div class="container"> <div class="row">  <div class="col-md-4">   <input type="text" class="form-control" data-length="5" id="remainingCharacters" data-model="Ch">  </div> </div> </div>  <script type="text/javascript">  var strLen = (function(){//strlLength的功能相同，但是写法巨麻烦   return function(_str,_model){    _model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文为2个字符    var _strLen = _str.length; //获取字符串长度    if(_strLen == 0){     return 0;    }else{     var chinese = _str.match(/[/u4e00-/u9fa5]/g); //匹配中文     return _strLen + (chinese && _model == "Ch"?chinese.length:0); //为什么要&&？    }   }  })();  var strLength = function(_str,_model){   _model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文为2个字符   var _strLen = _str.length; //获取字符串长度   if(_strLen == 0){    return 0;   }else{    var chinese = _str.match(/[/u4e00-/u9fa5]/g); //匹配中文    return _strLen + (chinese && _model == "Ch"?chinese.length:0); //为什么要&&？   }  }  var funcRemainingCharacters = function(){   remainingCharacters = document.getElementById("remainingCharacters");   var clearRemainingCharacters = function(_this){    var _value = _this.value;    var _valueLength = _value.length;    var dataLength = _this.getAttribute("data-length");    var dataModel = _this.getAttribute("data-model");    var subLen = dataLength;    if(dataModel == "Ch"){//仅当开启Ch后，才对重新计算截取的长度     _valueLength = strLength(_value,dataModel);     var vv = _value.match(/[/u4e00-/u9fa5]/g); //当输入【哈哈】时，vv是["哈","哈"]数组     subLen = dataLength - (!vv?0:vv.length);    }    //_valueLength代表总共的字符长度，比如哈哈哈 为 6    //dataLength是我们定义的限制长度，比如 5    //subLen是计算的截取长度，当输入家具啊    if(_valueLength > dataLength){     _this.value = _value.substr(0,subLen);    }   }   remainingCharacters.onfocus = function(){    clearRemainingCharacters(this);   }   remainingCharacters.onkeyup = function(){    clearRemainingCharacters(this);   }   remainingCharacters.onblur = function(){    clearRemainingCharacters(this);   }  }  addLoadEvent(funcRemainingCharacters); </script> <hr> <!-- **************************************************************************** --></script></body></html>

6 添加CSS函数

var setCSS = function(_this,cssOption){ if(!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style){  return; } for(var cs in cssOption){  _this.style[cs] = cssOption[cs]; } return _this;};

使用时

setCSS(xxx,{ "position":"relative", "top":"0px"});

7 自适应文本框

采用scrollHeight复制给style.height

xxx.style.overflowY = "hidden";xxx.onkeyup = function(){ xxx.style.height = xxx.scrollHeight+"px";};

8 复选框全选、取消和反选

//下面html代码<label class="checkbox-inline"> <input type="checkbox" name="actionSelects">读书</label><label class="checkbox-inline"> <input type="checkbox" name="actionSelects">跑步</label><label class="checkbox-inline"> <input type="checkbox" name="actionSelects">游戏</label><label class="checkbox-inline"> <input type="checkbox" name="actionSelects">游泳</label>//下面是js代码var targets = document.getElementsByName("actionSelects");var targetsLen = targets.length;var i = 0;document.getElementById("allSelect").onclick = function(){ for(i=0;i<targetsLen;i++){  targets[i].checked = true; }}    document.getElementById("cancelAllSelect").onclick = function(){ for(i=0;i<targetsLen;i++){  targets[i].checked = false; }}document.getElementById("_select").onclick = function(){ for(i=0;i<targetsLen;i++){  targets[i].checked = !targets[i].checked; }}

希望本文所述对大家学习javascript程序设计有所帮助。

上一篇：js判断鼠标位置是否在某个div中的方法

下一篇：理解javascript中Map代替循环