实用的JS代码段(表单篇)

整理了下比较实用的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"?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代码段》

时间: 04-15

实用的JS代码段(表单篇)的相关文章

常用JS代码段

1.表单文本框的focus 1 va($('input[type=text]')); 2 function va(a) { 3 for(var i=0;i < a.length; i++){ 4 var $txt= a.eq(i); 5 $txt.focus(function(){ 6 if($(this).val() == this.defaultValue){ 7 $(this).val(''); 8 } 9 }); 10 $txt.blur(function(){ 11 if($(this

验证表单的js代码段

JS常用功能 转载自:http://blog.csdn.net/kalision/article/details/12516103 引用js文件: <script src="js/demo.js"></script> 按钮 <button type="button" class="button medium button-style1 align-btn-right" value="send" o

经典的js 代码段

0. 如何创建嵌套的过滤器: 1 2 3 4 5 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为"selected"(.selected)的子节点. .filter(":not(:has(.selected))") 1. 如何重用元素搜索 1 2 3 4 5 6 7 8 9 10 var allItems = $("div.item&qu

《超实用的Node.js代码段》连载二:正确拼接Buffer

对于初学Node.js框架的开发人员来说,可能认为Buffer模块比较易学.重要性也不是那么突出.其实,Buffer模块在文件I/O和网络I/O中应用非常广泛,其处理二进制的性能比普通字符串性能要高出很多,重要性可谓是举足轻重.下面我们通过一个例程向读者演示一下,使用buf.concat()方法进行拼接的过程. 本例ch04.buffer-concat.js主要代码如下: 1 /** 2 * ch04.buffer-concat.js 3 */ 4 console.info("------ Bu

几个实用的CSS代码段总结

废话不多说,直接上代码,希望能帮到有需要的小伙伴 ①:遮罩 position: fixed; background: rgba(0, 0, 0, .4); top: 0; left: 0; right: 0; bottom: 0; z-index: 99; width: 100%; height: 100%; ②:三角(下面三角的代码按照下图上右下左的顺序排列) width: 0; height: 0; border-width: 8px; border-style: solid; border

实际项目中积累的一些关于事件的简单应用JS代码段(能力有限,不喜轻喷,23333)

1:鼠标移入图片显示另一张图片 var yuanquan_1 = document.getElementById("yuanquan_1" ); yuanquan_1. onmouseover = function () { yuanquan_1.src = "img/youhuigoujiu-2.png"; } yuanquan_1. onmouseout = function () { yuanquan_1.src = "img/youhuigouji

经常使用的js代码小结

在项目中经常会使用到一些小的js代码段,有些用法有时候自己有点犹豫会查API,有些是要我们自己手动写几个demo来搞清楚的,下面是我经常 在工作中使用到的demo. 关于数组的: 1,查询数组中重复的元素,以及重复的次数 var ary = ["1", "33", "22", "1", "1", "22", "22", "33", "22

IE6中让png的icon图标也透明的完整代码段

一个引用了在IE6中让img图标也可引用png图片的js插件代码的html是这样写的,兼容IE6: <a class="btn btn-select" href="javascript:fensong_addaccept()">                        <img src="__STATIC__/yjj/images/16.png" width="16" height="16&q

【代码段】让效率再飞一会儿

引言 VS中已经预定义了很多代码段,例如定义属性的prop,创建类的class等,非常方便我们开发.但是不能满足我们100%的需求,有时候自定义我们自己的代码段是非常有必要的. 学习代码段的相关资料 MSDN上已经有足够的资料供我们学习如何创建代码段了. 1.先放上默认代码段的资料,里面预定义的所有代码段.传送门 2.再放上代码段的一些基础知识,里面介绍了代码段的架构元素.传送门 3.最后是代码段演练,按照里面的步骤,你很快就学会如何编写属于自己的代码段了.传送门 编写自定义代码段 其实代码段就