ページに文字数の統計を入力します.
5922 ワード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<script language="javascript" type="text/javascript">
<!--
// ， ...
var
//
$el = 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 = $el(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 : $el(_exp._max),
_objTotal = _exp._total==undefined ? null : $el(_exp._total),
_objLeft = _exp._left==undefined ? null : $el(_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) 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('content', 65, {_max : 'stat_max', _total : 'stat_total', _left : 'stat_left', _hint : true});
}
-->
</script>
</head>
<body>
<textarea name="content" id="content" style="width: 80%;height: 75px;" value=" 65 " onmouseover="this.style.borderColor='#FF0066'" onmouseout="this.style.borderColor=''" onFocus="if (value ==' 65 '){value =''}" onBlur="if (value ==''){value=' 65 '}"> 65 </textarea>
<div> <span id="stat_max"></span>， <span id="stat_total"></span>， <span id="stat_left"></span></div>
</body>
</html>