增加表单的文字段的html代码是什么,超实用的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，不能再输入汉字了。代码参考如下，可以运行一下推敲推敲。

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);

全部代码：

function addLoadEvent(func){

var oldonload = window.onload;

if(typeof window.onload != 'function'){

window.onload = func;

}else{

window.onload = function(){

oldonload();

func();

}

}

}

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

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);

---

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

targets[i].checked = true;

}

} document.getElementById("cancelAllSelect").onclick = function(){

for(i=0;i

targets[i].checked = false;

}

}

document.getElementById("_select").onclick = function(){

for(i=0;i

targets[i].checked = !targets[i].checked;

}

}

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