實用的JS代碼段（表單篇）

時間 2019-11-19

原文原文鏈接

整理了下比較實用的Javascript代碼段,完整的代碼參考javascript

1 多個window.onload方法

　　因爲onload方法時在頁面加載完成後，自動調用的。所以被普遍的使用，可是弊端是隻能實用onload執行一個方法。下面代碼段，能夠保證多個方法在Onload時執行：css

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 限制字符串長度（區分中英文）

　　主要思想：html

　　須要3個數據：1 限制輸入的長度；2 已經輸入了多長； 3 截取多少個字符；java

　　因爲JS裏面的截取方法不區分中英文，所以node

　　「哈哈哈」.substr(0,2) ----> 哈哈git

　　「haha」.substr(0,2) ---> hagithub

　　可是，若是按照編碼一個漢字應該對應2個字符，一個字母對應一個字符。正則表達式

　　所以統計真實長度時，應該是字符的長度 + 漢字的個數 bootstrap

　　例如咱們限制輸入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>

View Code

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; } }