超实用的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 相关文章推荐
使用jquery解析XML示例代码
Sep 05 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
理解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
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
2013/08/21 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
Python常用模块介绍
2014/11/21 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
一套SQL笔试题
2016/08/14 面试题
西安当代医院管理研究院笔试题
2015/12/11 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
行政专员求职信范文
2014/05/03 职场文书
学生手册评语
2014/05/05 职场文书
毕业生应聘求职信
2014/07/10 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
python 逐步回归算法
2021/04/06 Python