実用的なJSコード断片（フォームの記事）

その他 2019-06-28 06:41:06 訪問数: null

2019ユニコーン企業重く募集エンジニアのPythonの標準>>> hot3.png

Javascriptのコードセグメントのより実用的な一種の下では、完全なコードの参照

方法1つのwindow.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文字列の長さ制限（ケース英語）

　　主なアイデア：

　　1つの長さリミット入力、2長くなって入力; 3取ら文字数;：3のデータを必要と

　　JS傍受法の内部には、中国語と英語を区別し、したがってないので

　　"ハッハッハ" .SUBSTR（0,2）---->笑

　　「笑」.SUBSTR（0,2）--->ヘクタール

　　しかし、2つの文字に対応して符号化する漢字によると、1つの文字が1つの文字に対応します。

　　したがって、統計の実際の長さの時間、それがあるべき長さの文字  + 文字の数 

　　たとえば、私たちは5つの文字の入力を制限します。そして、「笑」のポストを入力して、あなただけの1時間を入力することができ、あなたが中国語の文字を入力することはできません。次のコードを参照してください、あなたは精査の精査を実行することができます。 

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

参照

[1]「超実用的なJavaScriptのスニペット」

ます。https：//my.oschina.net/u/204616/blog/545505で再現

おすすめ

転載: blog.csdn.net/weixin_34121304/article/details/91989511
おすすめ
Apache Doris バージョン 2.0.10 が正式にリリースされました。
Open Source Daily | 大手モデルが戦争に突入、大手モデルのユニコーンが身売りしていることが明らかに; 最大のオープンソース AI コミュニティが GPU の共有に 1,000 万ドルを提供すると示唆
ランキング
ジャンゴ使用KindEditorアップロード写真
FirstOrDefault VS C＃の検索
SQL UNIONルール
VS Code は HTML スタートアップを実装し、ホット アップデート サービスを提供します
Linux プログラミング: 1. コルーチンの設計原則
目标检测的“尽头”竟是语言建模？Hinton团队提出Pix2Seq：性能优于DETR
CTFdインストールの新バージョン以降の操作および保守について話します
構造体へのポインタ出力4人の学生学生ID名前性別年齢を使用することにより
1.3.2リリース、連続ファイル同期ツールをSyncthing
PyQt5 インストールチュートリアル
アーカイブ
もっと
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)

コードワールド

© 2018 codetd.com