首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

超实用的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表单代码段

- Author -

xingoo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
优化javascript的执行速度
Jan 23 Javascript
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
JavaScript字符串对象charAt方法入门实例（用于取得指定位置的字符）
Oct 17 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
原生js简单实现放大镜特效
May 16 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 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
BufferPool(1) 连接查询(1) 数据合并(1) element-ui(1) location(2) zabbix(9) 复合索引(1) 逻辑函数(1) 缓存机制(1) http_stub_status_module(1)
You might like
一个程序下载的管理程序(三)
2006/10/09 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
jQuery Ajax之load()方法
2009/10/12 Javascript
javascript设计模式 封装和信息隐藏（上）
2012/07/24 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
js前端如何写一个精确的倒计时代码
2019/10/25 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
django允许外部访问的实例讲解
2018/05/14 Python
带你认识Django
2019/01/15 Python
不归路系列：Python入门之旅-一定要注意缩进！！！（推荐）
2019/04/16 Python
python微信撤回监测代码
2019/04/29 Python
python输出决策树图形的例子
2019/08/09 Python
python 初始化一个定长的数组实例
2019/12/02 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
同步和异步有何异同，在什么情况下分别使用他们？举例说明
2014/02/27 面试题
大学生实习自我鉴定
2013/12/11 职场文书
大一期末自我鉴定
2013/12/13 职场文书
关于赌博的检讨书
2014/01/24 职场文书
大学生暑期实践感言
2014/02/26 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
公司表扬信格式
2015/05/04 职场文书
红色革命电影观后感
2015/06/18 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
Python实现照片卡通化
2021/12/06 Python
vue组件vue-esign实现电子签名
2022/04/21 Vue.js