効果がクールなtextareaの入力文字数制限とヒント


http://www.blackliu.com/art/html/57/
<!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     </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(http://www.lanrentuku.com/down/js/images/12446168500.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;
},
//      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);
}
}
};
-->
</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
'. ... _lastRN = (e.value.substr(_max-1, 2) == "\r
"); 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"><span class=\"popIcon wrong></span> !</div> <div class="popRight"></div> </div> <div class="popAngle"><span></span></div> </div> */ // . ... 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(); } --> </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"><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> <br /> <br /> <br /> <br /> <br /> <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://bbs.blueidea.com/thread-2856572-1-1.html" target="_blank" >http://bbs.blueidea.com/thread-2856572-1-1.html</a></span> </div> <div class="case"> <div class="title"><a href="#" class="r">Top</a>popHint </div> <ul class="demo gray"> <li> blur :<input name="Test1_0" id="Test1_0" type="text" size="20" maxlength="20" onfocus="popHint(this, ' . TAB ');" value="" /> <a href="###"> </a></li> <li> blur :<input name="Test1_1" id="Test1_1" type="text" size="20" maxlength="20" onfocus="popHint(this, ' .', {_event : 'blur'});" value="" /></li> </ul> <ul class="demo gray"> <li>Test2:<input name="Test2" id="Test2" type="text" size="20" maxlength="20" value="" /></li> <li>Test3:<input name="Test3" id="Test3" type="text" size="20" maxlength="20" value="" /></li> <li>Test4:<input name="Test4" id="Test4" type="hidden" size="20" maxlength="20" value="" /></li> <li>Test5:<input name="Test5" id="Test5" type="text" size="20" maxlength="20" value="" style="display:none" /></li> <li><input name="" type="button" onclick="testPopHint();" value=" " /></li> </ul> </div> </body> </html>