超实用的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 相关文章推荐
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
Vuex提升学习篇
Jan 11 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
webpack 模块热替换原理
Apr 09 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
一个odbc连mssql分页的类
2006/10/09 PHP
PHP+Tidy-完美的XHTML纠错+过滤
2007/04/10 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
基于Discuz security.inc.php代码的深入分析
2013/06/03 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
jquery乱码与contentType属性设置问题解决方案
2013/01/07 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
Node.js 制作实时多人游戏框架
2015/01/08 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
深入理解js中this的用法
2016/05/28 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
通过代码实例了解Python sys模块
2020/09/14 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
中学生运动会入场词
2014/02/12 职场文书
升旗仪式主持词
2014/03/19 职场文书
作文评语集锦大全
2014/04/23 职场文书
计算机软件专业求职信
2014/06/10 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书
关于感恩的作文
2019/08/26 职场文书
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android