`
highping
  • 浏览: 44011 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类

控制textarea文本长度,并限制输入字数(带统计显示)的特效(一)

阅读更多

        控制textarea文本长度,并限制输入字数(带统计显示)的特效


特效代码如下(提示用alert的):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:mudoo>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>statInput 输入限制统计</title>
<style type="text/css">
<!--
* {
	padding: 0;
	margin: 0
}

body {
	margin: 3em;
	font: 12px Tahoma;
	background: #EAEAEA;
	color: #333333;
	line-height: 20px
}

input,textarea {
	font: 12px Tahoma;
	color: #666666;
	padding: 2px;
	border: solid 1px #DBDBDB
}

textarea {
	padding: 5px;
	line-height: 20px
}

p {
	margin: 1em 0
}

ul {
	
}

li {
	height: 1%;
	overflow: hidden;
	list-style-type: none
}

a {
	color: #666666;
	text-decoration: none
}

a:hover {
	color: #333333
}

.r {
	float: right
}

.l {
	float: left
}

.b {
	font-weight: bold
}

.gray {
	color: #666666;
	margin-top: 8px
}

.light {
	color: #FF6600;
	margin: 0 5px
}

.case {
	display: block;
	padding: 0 2em 2em 2em;
	border: solid 1px #EAEAEA;
	background: #FFFFFF;
	margin-bottom: 2em;
	height: 1%;
	overflow: hidden
}

.title {
	display: block;
	padding: .5em 2em .5em 1em;
	margin: 0 -2em 2em -2em;
	font-weight: bold;
	color: #000000;
	background: #FAFAFA;
	border-bottom: solid 1px #EAEAEA
}

.call {
	display: block;
}

.key {
	display: block;
	width: 6em;
	float: left
}

.type {
	display: block;
	width: 6em;
	float: left
}

.info {
	padding-left: 2em
}

.demo {
	margin-bottom: 2em
}
-->
</style>
		<script language="javascript" type="text/javascript">
<!--
// 这里都是公用函数,挺多的...
var
// 获取元素
$ = function(element) {
 return (typeof(element) == 'object' ? element : document.getElementById(element));
},
// 判断浏览器
brower = function() {
 var ua = navigator.userAgent.toLowerCase();
 var os = new Object();
 os.isFirefox = ua.indexOf ('gecko') != -1;
 os.isOpera = ua.indexOf ('opera') != -1;
 os.isIE = !os.isOpera  &&  ua.indexOf ('msie') != -1;
 os.isIE7 = os.isIE  &&  ua.indexOf ('7.0') != -1;
 return os;
},
// 事件操作(可保留原有事件)
eventListeners = [],
findEventListener = function(node, event, handler){
 var i;
 for (i in eventListeners){
  if (eventListeners[i].node == node  &&  eventListeners[i].event == event  &&  eventListeners[i].handler == handler){
   return i;
  }
 }
 return null;
},
myAddEventListener = function(node, event, handler){
 if (findEventListener(node, event, handler) != null){
  return;
 }
 if (!node.addEventListener){
  node.attachEvent('on' + event, handler);
 }else{
  node.addEventListener(event, handler, false);
 }
 eventListeners.push({node: node, event: event, handler: handler});
},
removeEventListenerIndex = function(index){
 var eventListener = eventListeners[index];
 delete eventListeners[index];
 if (!eventListener.node.removeEventListener){
  eventListener.node.detachEvent('on' + eventListener.event,eventListener.handler);
 }else{
  eventListener.node.removeEventListener(eventListener.event,eventListener.handler, false);
 }
},
myRemoveEventListener = function(node, event, handler){
 var index = findEventListener(node, event, handler);
 if (index == null) return;
 removeEventListenerIndex(index);
},
cleanupEventListeners = function(){
 var i;
 for (i = eventListeners.length; i > 0; i--){
  if (eventListeners[i] != undefined){
   removeEventListenerIndex(i);
  }
 }
};
-->
</script>
		<script language="javascript" type="text/javascript">
<!--
/*======================================================
 - statInput 输入限制统计
 - By Mudoo 2008.5
 - 长度超出_max的话就截取...貌似没有更好的办法了
======================================================*/
function statInput(e, _max, _exp) {
 e   = $(e);
 _max  = parseInt(_max);
 _max  = isNaN(_max) ? 0 : _max;
 _exp  = _exp==undefined ? {} : _exp;
 
 if(e==null || _max==0) {
  alert('statInput初始化失败!');
  return;
 }
 
 var
 // 浏览器
 _brower  = brower();
 // 输出对象
 _objMax  = _exp._max==undefined ? null : $(_exp._max),
 _objTotal = _exp._total==undefined ? null : $(_exp._total),
 _objLeft = _exp._left==undefined ? null : $(_exp._left),
 // 弹出提示
 _hint  = _exp._hint==undefined ? null : _exp._hint;
 
 // 初始统计
 if(_objMax!=null) _objMax.innerHTML = _max;
 if(_objTotal!=null) _objTotal.innerHTML = 0;
 if(_objLeft!=null) _objLeft.innerHTML = 0;
 
 // 设置监听事件
 // 输入这个方法比较好.
 // 但是Opera下中文输入跟粘贴不能正确统计...相当BT的东西...
 // 如果不考虑Opera的话就用这个吧.否则就老老实实用计时器.
 if(_brower.isIE) {
  myAddEventListener(e, "propertychange", stat);
 }else{
  myAddEventListener(e, "input", stat);
 }
 /*
 // 用计时器的话就什么浏览器都支持了.
 var _intDo = null;
 myAddEventListener(e, "focus", setListen);
 myAddEventListener(e, "blur", remListen);
 function setListen() {
  _intDo = setInterval(stat, 10);
 }
 function remListen() {
  clearInterval(_intDo);
 }
 */
 
 // 统计函数
 var _len, _olen, _lastRN, _sTop;
 _olen = _len = 0;
 function stat() {
  _len = e.value.length;
  if(_len==_olen) return;  // 防止用计时器监听时做无谓的牺牲...
  if(_len>_max) {
   _sTop = e.scrollTop;
   // 避免IE最后俩字符为'\r\n'.导致崩溃...
   _lastRN = (e.value.substr(_max-1, 2) == "\r\n");
   e.value = e.value.substr(0, (_lastRN ? _max-1 : _max));
   if(_hint==true) alert("悟空你也太调皮了,为师跟你说过,叫你不要输那么多字~~.");
   // 解决FF老是跑回顶部
   if(_brower.isFirefox) e.scrollTop = e.scrollHeight;
  }
  _olen = _len = e.value.length;
  
  // 显示已输入字数
  if(_objTotal!=null) _objTotal.innerHTML = _len;
  // 显示剩余可输入字数
  if(_objLeft!=null) _objLeft.innerHTML = (_max-_len)<0 ? 0 : (_max-_len);
 }
 
 stat();
}
-->
</script>
<script language="javascript" type="text/javascript">
<!--
/*********************************************
  - statInput 演示函数
*********************************************/
myAddEventListener(window, "load", testStatInput);
function testStatInput(){
 statInput('Test_1', 100, {_max : 'stat_max', _total : 'stat_total', _left : 'stat_left', _hint : true});
}
-->
</script>
	</head>
	<body>
		<div class="case">
			<div class="title">
				<a href="#" class="r">Top</a>statInput?调用方法
			</div>
			<div class="b">
				statInput(Element, MaxLen, {objMax, objTotal, objLeft, Hint});
			</div>
			<ul class="info gray">
				<li>
					<span class="key">Element:</span><span class="type">Object</span>限制统计对象?(*必须)
				</li>
				<li>
					<span class="key">MaxLen:</span><span class="type">Number</span>最大可输入长度?(*必须)
				</li>
				<li>
					<span class="key">objMax:</span><span class="type">Object</span>显示最大输入长度对象?(*可选)
				</li>
				<li>
					<span class="key">objTotal:</span><span class="type">Object</span>显示输入统计对象?(*可选)
				</li>
				<li>
					<span class="key">objLeft:</span><span class="type">Object</span>显示可输入长度对象?(*可选)
				</li>
				<li>
					<span class="key">Hint:</span><span class="type">Boolean</span>当长度超出上限时,是否提示?(*可选)
				</li>
			</ul>
		</div>
		<div class="case">
			<div class="title">
				<a href="#" class="r">Top</a>statInput 演示
			</div>
			<textarea name="Test_1" id="Test_1" rows="10" style="width: 99%">悟空你也太调皮了,我跟你说过,叫你不要乱扔东西, 乱扔东西这么做…… (咣当,悟空棍子掉在地上) 你看我还没有说完呢你把棍子又给扔掉了!月光宝盒是宝物,你把他扔掉会污染环境,唉,要是砸到小朋友那怎么办?就算没有砸到小朋友砸到那些花花草草也是不对的呀!</textarea>
			<div class="gray">
				最多可输入
				<span id="stat_max" class="b light"></span>,当前共
				<span id="stat_total" class="b light"></span>,还可输入
				<span id="stat_left" class="b light"></span>
			</div>
		</div>
	</body>
</html>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics