首頁 > 開發者 > JavaScript
整理了下比較實用的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 Regex去空格
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程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
