超实用的JavaScript表单代码段

更新时间：2016年02月26日 10:18:32 作者：xingoo

这篇文章主要为大家分享了超实用的JavaScript表单代码段，帮助大家更好地学习使用javascript表单操作，感兴趣的小伙伴们可以参考一下

整理了下比较实用的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程序设计有所帮助。

您可能感兴趣的文章:

js实现通过开始结束控制的计时器
这篇文章主要为大家详细介绍了js实现通过开始结束控制的计时器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
javascript框架设计读书笔记之数组的扩展与修复
本文是司徒正美的《javascript框架设计》的第三章第2节的读书笔记，本节主要介绍的是javascript数组的扩展与修复，本文则是选取了其中的重点部分展示给大家。
2014-12-12
前端小程序实现预览pdf并导出完整代码
这篇文章主要介绍了小程序中无法直接导出PDF或文档的解决方案,通过调用API下载文件并打开,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2025-01-01
JavaScript代码实现简单计算器
这篇文章主要为大家详细介绍了JavaScript代码实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
全面了解addEventListener和on的区别
下面小编就为大家带来一篇全面了解addEventListener和on的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
解析使用JS 清空File控件的路径值
本篇文章是对使用JS清空File控件的路径值的方法进行了详细的分析介绍，需要的朋友参考下
2013-07-07
JavaScript 12个有用的数组技巧
数组是Javascript最常见的概念之一，它为我们提供了处理数据的许多可能性，熟悉数组的一些常用操作是很有必要的。本文将为大家介绍12个有用的JavaScript数组技巧，需要的朋友可以参考一下
2021-12-12
IE6弹出“已终止操作”的解决办法
导致这个问题产生的原因，一般是因为js（一个比较复杂的js）写在body里面，在body元素加载完之前调用出现问题。显然，解决该问题的方法就是将这一段js放在body元素解析完毕之后。
2010-11-11
JavaScript定时器详解及实例
这篇文章详细介绍了JavaScript定时器及实例，有需要要的朋友可以参考一下
2013-08-08
Layui 解决表格异步调用后台分页的问题
今天小编就为大家分享一篇Layui 解决表格异步调用后台分页的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10

超实用的JavaScript表单代码段

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具