超实用的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 Flash插入函数免激活代码
Mar 31 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
jquery 插件学习(六)
Aug 06 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js操作cookie保存浏览记录的方法
Dec 25 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
微信小程序学习总结(五)常见问题实例小结
Jun 04 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
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
jquery 插件开发备注
2010/08/27 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
使用nodeJs来安装less及编译less文件为css文件的方法
2017/11/20 NodeJs
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
keras导入weights方式
2020/06/12 Python
Django缓存Cache使用详解
2020/11/30 Python
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
环境工程专业个人求职信
2013/12/05 职场文书
行政主管职责范本
2014/03/07 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
英语教师个人工作总结
2015/02/09 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
公开致歉信
2019/06/24 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS