Support multi-browser textarea text box to enter the number of words to determine js

2009-07-05  来源:本站原创  分类:AJAX  人气:635 

javascript file: (limitWord.js)

/ / Here are the common functions of Devil ...
var
/ / Access element
$ = Function (element) (
return (typeof (element) == 'object'? element: document.getElementById (element));
),
/ / Determine the browser
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;
),
/ / Event operations (be able to retain the original incident)
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);
)
)
);

/*================================================ ======
- StatInput restrictions on the importation of Statistics
- By Mudoo 2008.5
- Longer than the words on the interception of _max ... looks like there is no better way of
================================================== ====*/
function statInput (e, _max, _exp) (
e = $ (e);
_max = parseInt (_max);
_max = isNaN (_max)? 0: _max;
_exp_exp = _exp == undefined? (): _exp;

if (e == null | | _max == 0) (
alert ( 'statInput initialization failed!');
return;
)

var
/ / Browser
_brower = brower ();
/ / Output targets
_objMax = _exp._max == undefined? null: $ (_exp._max),
_objTotal = _exp._total == undefined? null: $ (_exp._total),
_objLeft = _exp._left == undefined? null: $ (_exp._left),
/ / Pop-up tips
_hint = _exp._hint == undefined? null: _exp._hint;

/ / Initial statistics
if (_objMax! = null) _objMax.innerHTML = _max;
if (_objTotal! = null) _objTotal.innerHTML = 0;
if (_objLeft! = null) _objLeft.innerHTML = 0;

/ / Set up to monitor events
/ / Input is better this way.
/ / However, under the Chinese Opera with the paste can not enter the correct statistics of things ... very BT ...
/ / If we do not consider Opera, then you use this on. Otherwise, it honestly with the timer.
if (_brower.isIE) (
myAddEventListener (e, "propertychange", stat);
) else (
myAddEventListener (e, "input", stat);
)
/ *
/ / Use the timer, then on what browsers support.
var _intDo = null;
myAddEventListener (e, "focus", setListen);
myAddEventListener (e, "blur", remListen);
function setListen () (
_intDo = setInterval (stat, 10);
)
function remListen () (
clearInterval (_intDo);
)
* /

/ / Statistical Functions
var _len, _olen, _lastRN, _sTop;
_olen = _len = 0;
function stat () (
_len = e.value.length;
if (_len == _olen) return; / / to prevent eavesdropping by the timer when the expense of unnecessary ...
if (_len> _max) (
_sTop = e.scrollTop;
/ / To avoid IE for the last two characters' \ r \ n '. Lead to the collapse of ...
_lastRN = (e.value.substr (_max-1, 2) == "\ r \ n");
e.value = e.value.substr (0, (_lastRN? _max-1: _max));
if (_hint == true) alert ( "Enter the word has gone beyond.");
/ / Solve the FF is always back to the top
if (_brower.isFirefox) ee.scrollTop = e.scrollHeight;
)
_olen = _len = e.value.length;

/ / Show the number of words have entered
if (_objTotal! = null) _objTotal.innerHTML = _len;
/ / Display the remaining number of words can be input
if (_objLeft! = null) _objLeft.innerHTML = (_max-_len) <0? 0: (_max-_len);
)

stat ();
)

Test page:

<! 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=gbk" />
<title> statInput </ title>
<script type="text/javascript" src="limitWord.js"> </ script>
<script language="javascript" type="text/javascript">
<! --
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>
<div>
<a href=""> Top </ a> statInput demo
</ div>
<textarea name="Test_1" rows="10""width: 99%"> Please enter the relevant content! </ textarea>
<div>
Maximum input
<span> </ span>, the current total of
<span> </ span>, can also be imported
<span> </ span>
</ div>
</ div>
</ body>
</ html>

相关文章