欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

超实用的JavaScript表单代码段_javascript技巧

程序员文章站 2022-03-15 08:03:09
...
整理了下比较实用的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,不能再输入汉字了。代码参考如下,可以运行一下推敲推敲。

 

全部代码:




 

(支持中英文区分)限制字符串长度


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代码




//下面是js代码
var targets = document.getElementsByName("actionSelects");
var targetsLen = targets.length;
var i = 0;
document.getElementById("allSelect").onclick = function(){
 for(i=0;i

希望本文所述对大家学习javascript程序设计有所帮助。

相关标签: JavaScript 表单