当前位置： 首页 > news >正文

实用的JS代码段（表单篇）

news 来源：原创 2024/4/30 14:53:06

整理了下比较实用的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>
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;
    }
}

参考

【1】《超实用的JavaScript代码段》

相关文章：

  • 【VMCloud云平台】SCAP（四）连接公有云（二）
  • easytouch使用方法
  • Django从安装到目录创建
  • Liam的C# 学习历程（五）：正则表达式（Regular Expressions）
  • 收集谷歌替代网站
  • fsync与数据库日志刷新
  • 第十六次课：Servlet实现商品用户评价
  • Canvas绘画功能（待补充）
  • RabbitMQ（六）远程连接
  • FileInputStream与FileOutputStream类
  • Octopus系列之数据上传格式要求说明
  • IIS 之 HTTP 错误 500.19（无法访问请求页面，因为该页的相关配置数据无效）
  • 依据波形的转折点文件，转换成波形文件
  • springMvc 入门学习（自动生成 springmvc 单表 两关联表 生成 及显示）
  • HealthKit开发教程之HealthKit的主要类型数据
  • es的写入过程
  • Invalidate和postInvalidate的区别
  • javascript从右向左截取指定位数字符的3种方法
  • java架构面试锦集：开源框架+并发+数据结构+大企必备面试题
  • Making An Indicator With Pure CSS
  • Mybatis初体验
  • node和express搭建代理服务器（源码）
  • PaddlePaddle-GitHub的正确打开姿势
  • spring学习第二天
  • vue学习系列（二）vue-cli
  • yii2权限控制rbac之rule详细讲解
  • 笨办法学C 练习34：动态数组
  • 浮现式设计
  • 悄悄地说一个bug
  • 使用Swoole加速Laravel(正式环境中)
  • 赢得Docker挑战最佳实践
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • MyCAT水平分库
  • ​DB-Engines 12月数据库排名： PostgreSQL有望获得「2020年度数据库」荣誉?
  • # 日期待t_最值得等的SUV奥迪Q9：空间比MPV还大，或搭4.0T，香
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • $redis-setphp_redis Set命令，php操作Redis Set函数介绍
  • （python）数据结构---字典
  • （六）什么是Vite——热更新时vite、webpack做了什么
  • （一）使用IDEA创建Maven项目和Maven使用入门（配图详解）
  • .NET CORE 第一节 创建基本的 asp.net core
  • .NET Core 版本不支持的问题
  • .NET Framework 4.6.2改进了WPF和安全性
  • .NET MVC第五章、模型绑定获取表单数据
  • .NET框架设计—常被忽视的C#设计技巧
  • .stream().map与.stream().flatMap的使用
  • @SuppressLint(NewApi）和@TargetApi()的区别
  • [ NOI 2001 ] 食物链
  • [].slice.call()将类数组转化为真正的数组
  • [14]内置对象
  • [BZOJ] 3262: 陌上花开
  • [C#] 我的log4net使用手册
  • [C#][DevPress]事件委托的使用
  • [Codeforces] combinatorics (R1600) Part.2
  • [CSS] - 修正IE6不支持position:fixed的bug