超实用的JavaScript表单代码段


Posted in Javascript onFebruary 26, 2016

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

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
理解javascript中Map代替循环
Feb 26 #Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 #Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 #Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 #Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 #Javascript
javascript动态获取登录时间和在线时长
Feb 25 #Javascript
基于javascript实现动态时钟效果
Aug 18 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
jquery性能优化高级技巧
2015/08/24 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
python爬虫爬取网页表格数据
2018/03/07 Python
Python编写一个优美的下载器
2018/04/15 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
领班岗位职责范文
2014/02/06 职场文书
黄河的主人教学反思
2014/02/07 职场文书
目标管理责任书
2014/04/15 职场文书
同志主要表现材料
2014/08/21 职场文书
代办社保委托书范文
2014/10/06 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
思想品德课教学反思
2016/02/24 职场文书