表單功能之"即時提示可輸入字元(區分中英文)"
最近學開車, 所以較疲憊...
但看到這個功能的code又令人精神一振...一看就知道是非新手才寫的出來的,
非常簡潔且設計感高,
所以想向這個code學習,
很多人都怕給別人看到自己的source code, 其實根本不用擔心,
這種事只能防懶人, 如果真的有心要看是防不住的, 而這種有心人我是覺得不多拉~
我自己要看懂以下的每個code也是花一段時間>"<
以下是完整的code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>2-10 即時顯示可輸入字元</title>
<style>
.remainingCharacter {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2>即時顯示還可以輸入多少字元（區分中英文）</h2>
<input type="text" data-length="5" id="remainingCharacters" data- remainingCharacters="charActers1,charActers2" data-model="Ch" name="remainingCharacters"/><br />
<p>測試1：還可以輸入<span class="remainingCharacters" id="charActers1">5</span>字元</p>
<p>測試2：還可以輸入<span class="remainingCharacters" id="charActers2">5</span>字元</p>
<script>
window.onload = function(){
var forElementArr = function(_elementArr, callBack){ //走訪節點
var arr =_elementArr, //所有節點物件
self = this; //外層環境 --> 其實這個在這功能中都沒用到@@
if(!(_elementArr instanceof Array)) { //如果不是陣列，變成陣列物件方便處理
arr = [_elementArr];
};
for(var i= 0,arrLen = arr.length ;i<arrLen;i++){ //走訪陣列
var arrI = arr[i];
if(typeof arrI == "string"){ //判斷是否為字串
arrI = document.getElementById(arrI); // 取得html中那兩個<p></p>的innerHTML
}
callBack && callBack(i, arrI); //如果有回呼則執行回呼 --> 新手才寫不出來"callBack &&"這行, 真的厲害
}
},
showRemainingCharacters = function(_nums, _remainingCharacters){
if(_remainingCharacters.search(",") != -1){
_remainingCharacters = _remainingCharacters.split(","); //英文字串分割
}
forElementArr(_remainingCharacters, function(_index, _this){
_this.innerHTML = (_nums && _nums.toString()) || "0"; //新手才寫不出來"nums && "這行, 真的厲害
});
},
strLen = (function() { //統計中英文字元數
var trim = function(chars){ // trim是私有變數, 形成閉包
return (chars || "").replace( /^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" );
}
return function(_str, _model) { //返回字元處理的函數
_str = trim(_str),
_model = _model || "Ch"; //預設為中文模式
var _strLen = _str.length; //獲取字元長度
if(_strLen == 0){ //如果字元長度為0直接返回
return 0;
}
else{
var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
return _strLen + (chinese && _model == "Ch" ? chinese.length: 0); // 因為中文佔的位子是非中文的2倍, 所以這邊如果在中文模式下 ,要加上 var chinese的數字
}
};
})(),
//獲取限制對象
remainingCharacters = document.getElementById("remainingCharacters"),
clearNonumber = function(tThis){ //清除數字字元
var _v = tThis.value,
_vLen = _v.length,
dataLength = tThis.getAttribute("data-length"),
remainingCharacters = tThis.getAttribute("data-remainingCharacters"); //如果有即時顯示的屬性，則在指定元素上顯示
/*區分中英文前 (這段被註解掉是因為這用在不區分中英文的功能中)
if(_v.length > dataLength) tThis.value = _v.substr(0, dataLength);*/
var dataModel = tThis.getAttribute("data-model");
//區分中英文後
var subLen = dataLength;
if(dataModel == "Ch"){ //如果為中文模式
_vLen = strLen(_v, dataModel); //獲取長度
var vv = _v.match(/[\u4e00-\u9fa5]/g);
subLen = dataLength - (!vv ? 0 : vv.length);
}
if(_vLen > dataLength) tThis.value = _v.substr(0, subLen);
if(remainingCharacters){
showRemainingCharacters(!_vLen ? dataLength :(_vLen > dataLength ? 0 :dataLength - _vLen), remainingCharacters);
}
};
remainingCharacters.onfocus = function(){ //獲取焦點
clearNonumber(this);
}
remainingCharacters.onkeyup = function(){ //鍵盤事件
clearNonumber(this);
}
remainingCharacters.onblur = function(){ //失去焦點
clearNonumber(this);
}
};
</script>
</body>
</html>
但看到這個功能的code又令人精神一振...一看就知道是非新手才寫的出來的,
非常簡潔且設計感高,
所以想向這個code學習,
很多人都怕給別人看到自己的source code, 其實根本不用擔心,
這種事只能防懶人, 如果真的有心要看是防不住的, 而這種有心人我是覺得不多拉~
我自己要看懂以下的每個code也是花一段時間>"<
以下是完整的code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>2-10 即時顯示可輸入字元</title>
<style>
.remainingCharacter {
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<h2>即時顯示還可以輸入多少字元（區分中英文）</h2>
<input type="text" data-length="5" id="remainingCharacters" data- remainingCharacters="charActers1,charActers2" data-model="Ch" name="remainingCharacters"/><br />
<p>測試1：還可以輸入<span class="remainingCharacters" id="charActers1">5</span>字元</p>
<p>測試2：還可以輸入<span class="remainingCharacters" id="charActers2">5</span>字元</p>
<script>
window.onload = function(){
var forElementArr = function(_elementArr, callBack){ //走訪節點
var arr =_elementArr, //所有節點物件
self = this; //外層環境 --> 其實這個在這功能中都沒用到@@
if(!(_elementArr instanceof Array)) { //如果不是陣列，變成陣列物件方便處理
arr = [_elementArr];
};
for(var i= 0,arrLen = arr.length ;i<arrLen;i++){ //走訪陣列
var arrI = arr[i];
if(typeof arrI == "string"){ //判斷是否為字串
arrI = document.getElementById(arrI); // 取得html中那兩個<p></p>的innerHTML
}
callBack && callBack(i, arrI); //如果有回呼則執行回呼 --> 新手才寫不出來"callBack &&"這行, 真的厲害
}
},
showRemainingCharacters = function(_nums, _remainingCharacters){
if(_remainingCharacters.search(",") != -1){
_remainingCharacters = _remainingCharacters.split(","); //英文字串分割
}
forElementArr(_remainingCharacters, function(_index, _this){
_this.innerHTML = (_nums && _nums.toString()) || "0"; //新手才寫不出來"nums && "這行, 真的厲害
});
},
strLen = (function() { //統計中英文字元數
var trim = function(chars){ // trim是私有變數, 形成閉包
return (chars || "").replace( /^(\s|\u00A0)+|(\s|\u00A0)+$/g, "" );
}
return function(_str, _model) { //返回字元處理的函數
_str = trim(_str),
_model = _model || "Ch"; //預設為中文模式
var _strLen = _str.length; //獲取字元長度
if(_strLen == 0){ //如果字元長度為0直接返回
return 0;
}
else{
var chinese = _str.match(/[\u4e00-\u9fa5]/g); //匹配中文
return _strLen + (chinese && _model == "Ch" ? chinese.length: 0); // 因為中文佔的位子是非中文的2倍, 所以這邊如果在中文模式下 ,要加上 var chinese的數字
}
};
})(),
//獲取限制對象
remainingCharacters = document.getElementById("remainingCharacters"),
clearNonumber = function(tThis){ //清除數字字元
var _v = tThis.value,
_vLen = _v.length,
dataLength = tThis.getAttribute("data-length"),
remainingCharacters = tThis.getAttribute("data-remainingCharacters"); //如果有即時顯示的屬性，則在指定元素上顯示
/*區分中英文前 (這段被註解掉是因為這用在不區分中英文的功能中)
if(_v.length > dataLength) tThis.value = _v.substr(0, dataLength);*/
var dataModel = tThis.getAttribute("data-model");
//區分中英文後
var subLen = dataLength;
if(dataModel == "Ch"){ //如果為中文模式
_vLen = strLen(_v, dataModel); //獲取長度
var vv = _v.match(/[\u4e00-\u9fa5]/g);
subLen = dataLength - (!vv ? 0 : vv.length);
}
if(_vLen > dataLength) tThis.value = _v.substr(0, subLen);
if(remainingCharacters){
showRemainingCharacters(!_vLen ? dataLength :(_vLen > dataLength ? 0 :dataLength - _vLen), remainingCharacters);
}
};
remainingCharacters.onfocus = function(){ //獲取焦點
clearNonumber(this);
}
remainingCharacters.onkeyup = function(){ //鍵盤事件
clearNonumber(this);
}
remainingCharacters.onblur = function(){ //失去焦點
clearNonumber(this);
}
};
</script>
</body>
</html>
留言
張貼留言