首頁  >  文章  >  web前端  >  超實用的JavaScript表單程式碼段_javascript技巧

超實用的JavaScript表單程式碼段_javascript技巧

WBOY
WBOY原創
2016-05-16 15:13:231468瀏覽

整理了下比較實用的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"&#63;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"&#63;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&#63;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>

全部程式碼:




 
 
 


 

(支持中英文区分)限制字符串长度

<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"&#63;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"&#63;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&#63;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>

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程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn