Tip: you can modify some code before running
<!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>POPHint & statInput integration effect</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}/* popHint Style */#popHint {position: absolute; line-height: normal}#popHint .popLeft, #popHint .popRight, #popHint .popAngle span, #popHintText, #popHint .popIcon {background-image: url(yun_qi_img/PopHint.gif)}#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}/* 这里可以自己扩展图标.(15*10) */--></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;},// 生成元素到refNodeappendElement = 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);}}};--></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) 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();}/*********************************************- POPHint 弹出提示框- By Mudoo 2008.5**********************************************/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();/*******************************************popHtml******************************************<div id="popHint"><div id="popHeader"><div class="popLeft"></div><div id="popHintText">请输入您的用户名！</div><div class="popRight"></div></div><div class="popAngle"></div></div>*/// 好了.输出...var _Html = "<div id=\"popHeader\">" +"<div class=\"popLeft\"></div>" +"<div id=\"popHintText\"></div>" +"<div class=\"popRight\"></div>" +"</div>"+"<div class=\"popAngle\"></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 = ""+ _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();}--></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});}/********************************************* - popHint 演示函数*********************************************/function testPopHint() {if($('Test2').value==''){popHint($('Test2'), 'Test2不能为空...', {_event : 'blur'});$('Test2').focus();return false;}if($('Test3').value==''){popHint($('Test3'), 'Test3也不能为空...', 'blur');$('Test3').focus();return false;}if($('Test4').value==''){popHint($('Test4'), 'Test4虽然看不见,但也不能为空...');$('Test4').value='填一点进去...';return false;}if($('Test5').value==''){popHint($('Test5'), 'Test5也一样...');return false;}}--></script></head><body><div class="case"><div class="title">TopstatInput call method</div><div class="b">StatInput (Element, MaxLen, {objMax, objTotal, objLeft, Hint });</div><ul class="info gray"><li>Element: Object limits the statistical Object (* required)</li><li>MaxLen: maximum input length of Number (* required)</li><li>ObjMax: displays the maximum input length of an Object (* optional)</li><li>ObjTotal: displays the input statistics Object (* optional)</li><li>ObjLeft: displays the printable Object length (* optional)</li><li>Hint: Boolean Indicates whether to prompt when the length exceeds the upper limit (* optional)</li></ul></div><div class="case"><div class="title">TopstatInput demo</div><textarea name="Test_1" id="Test_1" rows="10" >Wukong, you are too naughty. I told you not to litter or do so ...... (When the Wukong stick fell to the ground) you see I haven't finished it yet. You threw it away again! The baby box is a treasure. Throwing it away will pollute the environment? It's not even true if you haven't hit any of your kids!
Up
ToppopHint call method (currently only one row is supported)
PopHint (Element, Hint, {Type, Event });
- Element: Object pop-up Object. Based on it. (* Required)
- Hint: String pop-up information. HTML is supported, but line breaks are not supported. (* Required)
- Type: String pop-up Type. In fact, the type is incorrect. Just define an icon... (you can add many "types" to the style by yourself) (* optional)
- Event: String to close the trigger Event. Currently, only one event can be bound (default click = document. onmousedown, blur = Element. onblur) (* optional)
See: http: // bbs./thread-2856572-1-1.html
ToppopHint demo
- Test blur is not disabled:
- Disable test blur:
- Test2:
- Test3:
- Test4:
- Test5:
Tip: you can modify some code before running
