超实用的JavaScript表单代码段
整理了下比较实用的Javascript表单代码段，分享给大家供大家参考，具体内容如下
1多个window.onload方法
由于onload方法时在页面加载完成后，自动调用的。因此被广泛的使用，但是弊端是只能实用onload执行一个方法。下面代码段，可以保证多个方法在Onload时执行：
functionaddLoadEvent(func){
varoldonload=window.onload;
if(typeofwindow.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(){
returnfalse;
}
xxx.onpaste=function(){
returnfalse;
}
5限制字符串长度（区分中英文）
主要思想：
需要3个数据：1限制输入的长度；2已经输入了多长；3截取多少个字符；
由于JS里面的截取方法不区分中英文，因此
“哈哈哈”.substr(0,2)---->哈哈
“haha”.substr(0,2)--->ha
但是，如果按照编码一个汉字应该对应2个字符，一个字母对应一个字符。
因此统计真实长度时，应该是字符的长度+汉字的个数
例如我们限制输入5个字符：那么输入“哈哈”后，就只能输入一个h，不能再输入汉字了。代码参考如下，可以运行一下推敲推敲。
<scripttype="text/javascript">
varstrLen=(function(){//strlLength的功能相同，但是写法巨麻烦
returnfunction(_str,_model){
_model=_model||"Ch";//En模式下，中文算作1字符；Ch模式下，中文为2个字符
var_strLen=_str.length;//获取字符串长度
if(_strLen==0){
return0;
}else{
varchinese=_str.match(/[\u4e00-\u9fa5]/g);//匹配中文
return_strLen+(chinese&&_model=="Ch"?chinese.length:0);//为什么要&&？
}
}
})();
varstrLength=function(_str,_model){
_model=_model||"Ch";//En模式下，中文算作1字符；Ch模式下，中文为2个字符
var_strLen=_str.length;//获取字符串长度
if(_strLen==0){
return0;
}else{
varchinese=_str.match(/[\u4e00-\u9fa5]/g);//匹配中文
return_strLen+(chinese&&_model=="Ch"?chinese.length:0);//为什么要&&？
}
}
varfuncRemainingCharacters=function(){
remainingCharacters=document.getElementById("remainingCharacters");
varclearRemainingCharacters=function(_this){
var_value=_this.value;
var_valueLength=_value.length;
vardataLength=_this.getAttribute("data-length");
vardataModel=_this.getAttribute("data-model");
varsubLen=dataLength;
if(dataModel=="Ch"){//仅当开启Ch后，才对重新计算截取的长度
_valueLength=strLength(_value,dataModel);
varvv=_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>
全部代码：
<!doctypehtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<linkrel="stylesheet"href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<scripttype="text/javascript">
functionaddLoadEvent(func){
varoldonload=window.onload;
if(typeofwindow.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
</script>
</head>
<body>
<pclass="h3">（支持中英文区分）限制字符串长度</p>
<divclass="container">
<divclass="row">
<divclass="col-md-4">
<inputtype="text"class="form-control"data-length="5"id="remainingCharacters"data-model="Ch">
</div>
</div>
</div>
<scripttype="text/javascript">
varstrLen=(function(){//strlLength的功能相同，但是写法巨麻烦
returnfunction(_str,_model){
_model=_model||"Ch";//En模式下，中文算作1字符；Ch模式下，中文为2个字符
var_strLen=_str.length;//获取字符串长度
if(_strLen==0){
return0;
}else{
varchinese=_str.match(/[\u4e00-\u9fa5]/g);//匹配中文
return_strLen+(chinese&&_model=="Ch"?chinese.length:0);//为什么要&&？
}
}
})();
varstrLength=function(_str,_model){
_model=_model||"Ch";//En模式下，中文算作1字符；Ch模式下，中文为2个字符
var_strLen=_str.length;//获取字符串长度
if(_strLen==0){
return0;
}else{
varchinese=_str.match(/[\u4e00-\u9fa5]/g);//匹配中文
return_strLen+(chinese&&_model=="Ch"?chinese.length:0);//为什么要&&？
}
}
varfuncRemainingCharacters=function(){
remainingCharacters=document.getElementById("remainingCharacters");
varclearRemainingCharacters=function(_this){
var_value=_this.value;
var_valueLength=_value.length;
vardataLength=_this.getAttribute("data-length");
vardataModel=_this.getAttribute("data-model");
varsubLen=dataLength;
if(dataModel=="Ch"){//仅当开启Ch后，才对重新计算截取的长度
_valueLength=strLength(_value,dataModel);
varvv=_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函数
varsetCSS=function(_this,cssOption){
if(!_this||_this.nodeType===3||_this.nodeType===8||!_this.style){
return;
}
for(varcsincssOption){
_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代码
<labelclass="checkbox-inline">
<inputtype="checkbox"name="actionSelects">读书
</label>
<labelclass="checkbox-inline">
<inputtype="checkbox"name="actionSelects">跑步
</label>
<labelclass="checkbox-inline">
<inputtype="checkbox"name="actionSelects">游戏
</label>
<labelclass="checkbox-inline">
<inputtype="checkbox"name="actionSelects">游泳
</label>
//下面是js代码
vartargets=document.getElementsByName("actionSelects");
vartargetsLen=targets.length;
vari=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程序设计有所帮助。