统计textarea输入个数并限制输入长度特效提示

HTML5 herman 1595浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

最近论坛里有人问,如何实现textarea文本编辑器的计数功能。我在这里特意的写一篇文章来实现textarea或input标签的计数功能。
实现原理如下:首先需要实现键盘事件的监听功能,在输入内容(插入、删除、修改)时进行长度统计,达到规定的长度后,在输入的内容将被受到限制。
先看下运行效果:

完整实现代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>POPHint & statInput 整合效果</title>
<style type="text/css">
* {padding: 0; margin: 0}
body {margin: 30em; 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}
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}
/* popHint Style */
#popHint {position: absolute; line-height: normal}
#popHint .popLeft, #popHint .popRight, #popHint .popAngle span, #popHintText, #popHint .popIcon {}
#popHint .popHeader {height: 1%; overflow: hidden !important; overflow /**/: visible}
 #popHint .popLeft {float: left; width: 5px; height: 24px; background-position: 0 0; background-repeat: no-repeat}
 #popHint .popRight {float: left; width: 5px; height: 24px; background-position: -10px -25px; background-repeat: no-repeat}
 #popHint .popAngle {clear: both; position: relative; height: 10px}
 #popHint .popAngle span {position: absolute; top: -3px; left: 15px; width: 7px; height: 13px; background-position: 0 -75px; background-repeat: no-repeat}
#popHintText {float: left; color: #975400; height: 19px !important; height /**/: 24px; padding: 5px 0 0 0; white-space: nowrap; background-position: 0 -50px; background-repeat: repeat-x; overflow: hidden}
#popHintText .popIcon {float: left; width: 15px; height: 10px; margin: 1px 3px 0 0}
 #popHint .wrong {background-position: 0 -90px; background-repeat: no-repeat}
 #popHint .right {background-position: 0 -105px; background-repeat: no-repeat}
</style>
<script>
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;
},
// 生成元素到refNode
appendElement = function(tagName, Attribute, strHtml, refNode) {
	var cEle = document.createElement(tagName);
	// 属性值
	for (var i in Attribute){
		cEle.setAttribute(i, Attribute[i]);
	}
	cEle.innerHTML = strHtml;
	refNode.appendChild(cEle);
	return cEle;
},
// 获取元素坐标
getCoords = function(node){
	var x = node.offsetLeft;
	var y = node.offsetTop;
	var parent = node.offsetParent;
	while (parent != null){
		x += parent.offsetLeft;
		y += parent.offsetTop;
		parent = parent.offsetParent;
	}
	return {x: x, y: y};
},
// 事件操作(可保留原有事件)
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);
		}
	}
};
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;

	// 设置监听事件
	if(_brower.isIE) {
		myAddEventListener(e, "propertychange", stat);
	}else{
		myAddEventListener(e, "input", stat);
	}

	// 统计函数
	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) popHint(e, "超过最大输入限制了~~.");
			// 解决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();
}
function popHint(obj, msg, initValues) {
	var
	_obj = $(obj),
	_objHint = $("popHint"),
	_msg = msg,
	_init = initValues;
	 
	// 初始化失败...
	if(_obj==undefined || _msg==undefined || _msg=="") return;
	 
	// 设置初始值
	_init = _init==undefined ? {_type : "wrong", _event : "click"} : _init;
	// obj如果不可见。设置弹出对象为obj父元素
	if(_obj.style.display=='none' || _obj.style.visibility=='hidden' || _obj.getAttribute('type')=='hidden') _obj = _obj.parentNode;
	 
	var
	_type = null,
	_event = null,
	_place = getCoords(_obj),
	_marTop = null,
	_objText = $("popHintText"),
	 
	// 初始化
	init = function() {
		var _hint = _obj.getAttribute("hint");
		if(_hint=="false") return;
		// 有的时候initValues不为空.但是只设置一个值...避免发生错误.再次设置初始值...
		_type = _init._type==undefined ? "wrong" : _init._type;
		_type = _type.toLowerCase();
		_event = _init._event==undefined ? "click" : _init._event;
		_event = _event.toLowerCase();  
		var _Html = "<div id=\"popHeader\">" +
		" <div class=\"popLeft\"></div>" +
		" <div id=\"popHintText\"></div>" +
		" <div class=\"popRight\"></div>" +
		"</div>"+
		"<div class=\"popAngle\"><span></span></div>"
		if(_objHint==null) {
			_objHint = appendElement("div", {"id" : "popHint"}, _Html, document.body);
			_objHint.style.display = "none";
			_objText = $("popHintText");
		}
		show();
	},
	// 显示
	show = function() {
		_objHint.style.display = "";
		_marTop = _objHint.offsetHeight;
		_msg = "<span class=\"popIcon "+ _type +"\"></span>"+ _msg;
		_objText.innerHTML = _msg;
		  
		_objHint.style.left = _place.x +"px";
		_objHint.style.top = (_place.y-_marTop+8) +"px";
		  
		// 关闭触发事件
		switch(_event) {
			case "blur" :
				myAddEventListener(_obj, 'blur', hide);
			break;
			//default :
			case "click" :
				myAddEventListener(document, 'mousedown', hide);
			break;
		}
	},
	// 关闭
	hide = function() {
		_objHint.style.display = "none";
		_objText.innerHTML = "";
		// 移除关闭触发事件
		myRemoveEventListener(_obj, 'blur', hide);
		myRemoveEventListener(document, 'mousedown', hide);
	};
	init();
}
myAddEventListener(window, "load", testStatInput);
function testStatInput(){
	statInput('Test_1', 10, {_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="3" style="width: 99%" >业余草 http://www.xttblog.com</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>
	<div class="case">
		<div class="title"><a href="#" class="r">Top</a>popHint?调用方法(目前只支持单行)</div>
		<div class="b">popHint(Element, Hint, {Type, Event});</div>
		<ul class="info gray">
			<li><span class="key">Element:</span><span class="type">Object</span>弹出对象。根据它来定位的。??(*必须)</li>
			<li><span class="key">Hint:</span><span class="type">String</span>弹出的信息,支持HTML可是不能换行。??(*必须)</li>
			<li><span class="key">Type:</span><span class="type">String</span>弹出类型。其实说类型是不对的。只是定义个图标而已...(可自己在样式里加很多很多"类型")??(*可选)</li>
			<li><span class="key">Event:</span><span class="type">String</span>关闭触发事件。目前只能绑定单个事件(默认click=document.onmousedown,blur=Element.onblur)??(*可选)</li>
		</ul>
		<br />
		<span style="color: #333333" class="b">详见:<a href="http://www.xttblog.com/?p=461" target="_blank" >http://www.xttblog.com/?p=461</a></span>
	</div>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。原文地址:http://www.xttblog.com/?p=459

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » 统计textarea输入个数并限制输入长度特效提示