超實(shí)用的JavaScript表單代碼段
更新時(shí)間：2016年02月26日 10:18:32 作者：xingoo
這篇文章主要為大家分享了超實(shí)用的JavaScript表單代碼段，幫助大家更好地學(xué)習(xí)使用javascript表單操作，感興趣的小伙伴們可以參考一下
整理了下比較實(shí)用的Javascript表單代碼段，分享給大家供大家參考，具體內(nèi)容如下
1 多個(gè)window.onload方法
由于onload方法時(shí)在頁面加載完成后，自動(dòng)調(diào)用的。因此被廣泛的使用，但是弊端是只能實(shí)用onload執(zhí)行一個(gè)方法。下面代碼段，可以保證多個(gè)方法在Onload時(shí)執(zhí)行：
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
2 正則表達(dá)式去空格
str.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g,"");
3 利用正則過濾中文
str.replace(/[\u4e00-\u9fa5]/g,"");
4 禁止用戶的拷貝和復(fù)制
xxx.oncopy = function(){
return false;
}
xxx.onpaste = function(){
return false;
}
5 限制字符串長度（區(qū)分中英文）
主要思想：
需要3個(gè)數(shù)據(jù)：1 限制輸入的長度；2 已經(jīng)輸入了多長； 3 截取多少個(gè)字符；
由于JS里面的截取方法不區(qū)分中英文 ，因此
“哈哈哈”.substr(0,2) ----> 哈哈
“haha”.substr(0,2) ---> ha
但是，如果按照編碼一個(gè)漢字應(yīng)該對(duì)應(yīng)2個(gè)字符，一個(gè)字母對(duì)應(yīng)一個(gè)字符。
因此統(tǒng)計(jì) 真實(shí)長度 時(shí)，應(yīng)該是 字符的長度 + 漢字的個(gè)數(shù)
例如我們限制輸入5個(gè)字符：那么輸入“哈哈”后，就只能輸入一個(gè)h，不能再輸入漢字了。代碼參考如下，可以運(yùn)行一下推敲推敲。
<script type="text/javascript">
var strLen = (function(){//strlLength的功能相同，但是寫法巨麻煩
return function(_str,_model){
_model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文為2個(gè)字符
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個(gè)字符
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"){//僅當(dāng)開啟Ch后，才對(duì)重新計(jì)算截取的長度
_valueLength = strLength(_value,dataModel);
var vv = _value.match(/[\u4e00-\u9fa5]/g); //當(dāng)輸入【哈哈】時(shí)，vv是["哈","哈"]數(shù)組
subLen = dataLength - (!vv?0:vv.length);
}
//_valueLength代表總共的字符長度，比如哈哈哈 為 6
//dataLength是我們定義的限制長度，比如 5
//subLen是計(jì)算的截取長度，當(dāng)輸入家具啊
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>
全部代碼：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" >
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
</script>
</head>
<body>
<p class="h3">（支持中英文區(qū)分）限制字符串長度</p>
<div class="container">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" data-length="5" id="remainingCharacters" data-model="Ch">
</div>
</div>
</div>
<script type="text/javascript">
var strLen = (function(){//strlLength的功能相同，但是寫法巨麻煩
return function(_str,_model){
_model = _model || "Ch"; //En模式下，中文算作1字符；Ch模式下，中文為2個(gè)字符
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個(gè)字符
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"){//僅當(dāng)開啟Ch后，才對(duì)重新計(jì)算截取的長度
_valueLength = strLength(_value,dataModel);
var vv = _value.match(/[\u4e00-\u9fa5]/g); //當(dāng)輸入【哈哈】時(shí)，vv是["哈","哈"]數(shù)組
subLen = dataLength - (!vv?0:vv.length);
}
//_valueLength代表總共的字符長度，比如哈哈哈 為 6
//dataLength是我們定義的限制長度，比如 5
//subLen是計(jì)算的截取長度，當(dāng)輸入家具啊
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函數(shù)
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;
};
使用時(shí)
setCSS(xxx,{
"position":"relative",
"top":"0px"
});
7 自適應(yīng)文本框
采用scrollHeight復(fù)制給style.height
xxx.style.overflowY = "hidden";
xxx.onkeyup = function(){
xxx.style.height = xxx.scrollHeight+"px";
};
8 復(fù)選框全選、取消和反選
//下面html代碼
<label class="checkbox-inline">
<input type="checkbox" name="actionSelects">讀書
</label>
<label class="checkbox-inline">
<input type="checkbox" name="actionSelects">跑步
</label>
<label class="checkbox-inline">
<input type="checkbox" name="actionSelects">游戲
</label>
<label class="checkbox-inline">
<input type="checkbox" name="actionSelects">游泳
</label>
//下面是js代碼
var targets = document.getElementsByName("actionSelects");
var targetsLen = targets.length;
var i = 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;
}
}
希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
為JavaScript提供睡眠功能(sleep) 自編譯JS引擎
如何在js中讓函數(shù)睡眠多少秒? 經(jīng)常會(huì)有Javascript初學(xué)者提出這樣的問題,自從js出現(xiàn)以來.2010-08-08
js中string轉(zhuǎn)int把String類型轉(zhuǎn)化成int類型
今天碰到一個(gè)問題，需要把String類型的變量轉(zhuǎn)化成int類型的，js中String轉(zhuǎn)int和Java中不一樣，不能直接把Java中的用到j(luò)s中2014-08-08
解決微信內(nèi)置瀏覽器返回上一頁強(qiáng)制刷新問題方法
微信內(nèi)置瀏覽器在返回上一頁面，且上一頁面包含AJAX代碼時(shí)，頁面就會(huì)被強(qiáng)制刷新，極度影響用戶體驗(yàn)。而我們想要的效果是：返回上一頁面時(shí)，頁面還停留在原來的狀態(tài)，AJAX獲取到的數(shù)據(jù)還在，滾動(dòng)條也在原來的位置。下面跟著小編一起來看下吧2017-02-02
找到了一篇jQuery與Prototype并存的沖突的解決方法
找到了一篇jQuery與Prototype并存的沖突的解決方法...2007-08-08
JS前端面試必備——基本排序算法原理與實(shí)現(xiàn)方法詳解【插入/選擇/歸并/冒泡/快速排序】
這篇文章主要介紹了JS前端面試基本排序算法原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JS常見的基本排序算法相關(guān)原理、實(shí)現(xiàn)方法、時(shí)間復(fù)雜度及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
基于JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)功能代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
有時(shí)候我們?cè)诰W(wǎng)頁制作過程中需要彈出窗口，一般情況下，我們更希望窗口可以居中顯示2007-08-08
這篇文章主要介紹了electron中使用bootstrap的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
本篇文章主要是對(duì)javascript操作referer進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)隨機(jī)顏色輸入框的實(shí)例代碼，代碼簡單易懂，非常不錯(cuò)，需要的朋友參考下吧2016-12-12