时间:2021-05-25
整理了下比较实用的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>全部代码:
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 复选框全选、取消和反选
希望本文所述对大家学习javascript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一个检测表单数据的JavaScript实例,很简单,很实用,感兴趣的朋友可以看看?123456789101112131415161718192021222324
本文实例讲述了JS提交form表单。分享给大家供大家参考,具体如下:一、javascript页面加裁时自动提交表单:Form表单:javascript代码:fu
本文实例为大家分享了JavaScript实现表单验证功能的具体代码,供大家参考,具体内容如下以下是JavaScript的表单验证功能,可根据JS代码编写出你想要
TypeScript是微软开发的JavaScript的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeSc
推荐阅读:Javascript的表单验证长度Javascript的表单验证-提交表单Javascript的表单验证-揭开正则表达式的面纱JavaScript可用