超实用的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多个表单中文件上传网址的获得的代码示例
-
js检测网络是否具体连接功能的代码_javascript技巧
-
用js实现计算代码行数的简单方法附代码_javascript技巧
-
Javascript 数组添加一个 indexOf 方法的实现代码_javascript技巧
-
js控制fieldset高度的代码_javascript技巧
-
利用js动态添加删除table行的示例代码_javascript技巧
-
JavaScript实现的伸展收缩型菜单代码_javascript技巧
-
在HTML代码中使用JavaScript代码的例子_javascript技巧
-
JS将表单导出成EXCEL的实例代码_javascript技巧
-
得到form下的所有的input的js代码_javascript技巧