超實(shí)用的JavaScript表單代碼段

更新時間：2016年02月26日 10:18:32 作者：xingoo

這篇文章主要為大家分享了超實(shí)用的JavaScript表單代碼段，幫助大家更好地學(xué)習(xí)使用javascript表單操作，感興趣的小伙伴們可以參考一下

整理了下比較實(shí)用的Javascript表單代碼段，分享給大家供大家參考，具體內(nèi)容如下

1 多個window.onload方法

　　由于onload方法時在頁面加載完成后，自動調(diào)用的。因此被廣泛的使用，但是弊端是只能實(shí)用onload執(zhí)行一個方法。下面代碼段，可以保證多個方法在Onload時執(zhí)行：

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

2 正則表達(dá)式去空格

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

3 利用正則過濾中文

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

4 禁止用戶的拷貝和復(fù)制

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

5 限制字符串長度（區(qū)分中英文）

　　主要思想：

　　需要3個數(shù)據(jù)：1 限制輸入的長度；2 已經(jīng)輸入了多長； 3 截取多少個字符；

　　由于JS里面的截取方法不區(qū)分中英文，因此

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

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

　　但是，如果按照編碼一個漢字應(yīng)該對應(yīng)2個字符，一個字母對應(yīng)一個字符。

　　因此統(tǒng)計真實(shí)長度時，應(yīng)該是字符的長度 + 漢字的個數(shù)

　　例如我們限制輸入5個字符：那么輸入“哈哈”后，就只能輸入一個h，不能再輸入漢字了。代碼參考如下，可以運(yùn)行一下推敲推敲。

 <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"){//僅當(dāng)開啟Ch后，才對重新計算截取的長度
     _valueLength = strLength(_value,dataModel);
     var vv = _value.match(/[\u4e00-\u9fa5]/g); //當(dāng)輸入【哈哈】時，vv是["哈","哈"]數(shù)組
     subLen = dataLength - (!vv?0:vv.length);
    }
    //_valueLength代表總共的字符長度，比如哈哈哈 為 6
    //dataLength是我們定義的限制長度，比如 5
    //subLen是計算的截取長度，當(dāng)輸入家具啊
    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" >
 <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">（支持中英文區(qū)分）限制字符串長度</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"){//僅當(dāng)開啟Ch后，才對重新計算截取的長度
     _valueLength = strLength(_value,dataModel);
     var vv = _value.match(/[\u4e00-\u9fa5]/g); //當(dāng)輸入【哈哈】時，vv是["哈","哈"]數(shù)組
     subLen = dataLength - (!vv?0:vv.length);
    }
    //_valueLength代表總共的字符長度，比如哈哈哈 為 6
    //dataLength是我們定義的限制長度，比如 5
    //subLen是計算的截取長度，當(dāng)輸入家具啊
    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函數(shù)

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 自適應(yīng)文本框

采用scrollHeight復(fù)制給style.height

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

8 復(fù)選框全選、取消和反選

//下面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;
 }
}

希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

您可能感興趣的文章: