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

jysh0922

浏览: 70277 次
性别:
来自: 北京

最近访客更多访客>>

wenyan1232

meiping05

geniushz

lsw_fly

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js转贴（此分类下内容全为转载）

OS JavaScript Opera 浏览器 IE

<!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>

分享到：

实现在文本区域textarea中限制字数 | Prototype.js表单提交

2008-05-28 17:13
浏览 4342
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

实现在文本区域textarea中限制字数

select(下拉框)只读(类似输入框的readonly)

获得td后面的值

JavaScript中文长度问题

js学习

js学习

可以在收藏夹中显示出你的图标

IE地址栏前换成自己的图标

客户端脚本的基本对象

得到当前选中的文本

复制数据到剪贴板

基本控件的使用

让TextArea支持Table键

最近访客更多访客>>