ringa_lee2017-04-10 15:47:37
你好，您的问题是出自2014-09-《超实用的JavaScript代码段》一书中第二章第十节的，无需解答。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>2.10节 实时显示还可以输入多少字符（区分中英文）</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
.remainingCharacters {
color: green;
font-weight: bold;
}
</style>
<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 type="text/javascript">
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 );
}
callBack && callBack ( i,arrI ); //如果存在回调则执行回调
}
},
showRemainingCharacters = function ( _nums,_remainingCharacters ) {
//data-remainingCharacters="charActers1,charActers2"
if ( _remainingCharacters.search ( "," ) != -1 ) {
_remainingCharacters = _remainingCharacters.split ( "," );//英文字符串分割
}
forElementArr ( _remainingCharacters,function ( _index,_this ) {
_this.innerHTML = (_nums && _nums.toString ()) || "0";
} );
},
strLen = (function () { //统计中英文字符数
var trim = function ( chars ) {
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);
}
};
}) (),
//获取限制对象
remainingCharacters = document.getElementById ( "remainingCharacters" ),
clearNonumber = function ( tThis ) { //清除数字字符
var _v = tThis.value,
_vLen = _v.length,
dataLength = tThis.getAttribute ( "data-length" ),
remainingCharacters = tThis.getAttribute ( "data-remainingCharacters" ),//如果有实时显示的属性，则在指定元素上显示
dataModel = tThis.getAttribute ( "data-model" ), //区分中英文模式
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 ) {
//_vLen存在为true，大于限定长度返回0，小于的话返回差多少字符
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>
회신하다
0
