«

超实用的JavaScript表单代码段

时间：2024-3-2 02:12     作者：韩俊     分类： 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程序设计有所帮助。

标签: javascript

热门推荐

1 jquery mobile 实现自定义confirm确认框效果的简单实例
2 addEventListener和attachEvent二者绑定的执行函数中的this不相同
3 CCPry JS类库 代码
4 如何使用PHP和Chart.js创建数据可视化图表
5 如何在vue3中使用jsx语法
6 nodejs获取本机内网和外网ip地址的实现代码
7 Node.js 基础教程之全局对象
8 vue2实现数据请求显示loading图
9 JS前端中的WebSocket如何使用
10 node.js 动态执行脚本

日历

标签

hbase maven eclipse sybase PostgreSQL spring emcache oracle mongodb redis nginx golang java vue android ios mysql linux 微信小程序 css html php教程 javascript python php

搜索

最新文章

热门文章