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

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>
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

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

  • flash chart summary

    pen Flash Chart is an open source Flash chart drawing tool, offers a variety of programming interfaces, including PHP, Ruby, Perl, Python, Java,. Net, AS, JS, etc. to generate a variety of data interfaces, and then Flash to display the function is to ...

  • IBM Ajax Tutorial Series

    Links: http://ibm.csdn.net/ISN_J.aspx?action=JMP&pointid=1550 Part 10: Using JSON for data transmission In the asynchronous application to send and receive information, you can choose to plain text and XML as data format. Ajax grasp of this issue ...

  • jquery ajax example

    1. Check js file $. ajax (( type: "GET", url: "test.js", dataType: "script" )) 2.post data $. ajax (( type: "POST", url: "xxxx", data: "name = zhaoaiqing & age = 25", success: function ( ...

  • Strength of live practice teaching materials, suitable for each person team look - UFIDA Hua Table CTO talk about "out of the software factory"

    A few months ago, on reading "Going the software factory," one book, not yet published at that time, it can be considered the reference of the watch. Although the language rather uneventful, but the contents of people really can not but car ...

  • Workspace run under different Eclipse

    Now do live more and more often required to use eclipse in java and ruby & rails project conducted between the tangential shear from the past, because in the rails project used a coloring Aptana preferences, the results open the java project sour ...

  • Software development sunflower Baodian [reprint]

    Master the ability to reuse code very familiar with the new API's fast. This is because, he once used a lot of the API, have a lot of reusable code. He knows what is available and what is deficient. He has been using Qt, also used by gtk +, also ...

  • js events dynamically add and write-off

    IE's JScript existence of memory leak bug must we all know or have heard of. This is because of IE's memory recovery manager of a design error. When we create a prepared script when a cross-reference, for example, the following code: window.o ...

  • can not be represented as java.sql.Timestamp

    Development of procedures for the use of hibernate when, some time there is no need to fill in the fields, but after the hibernate query time reported "Java.sql.SQLException: Value'0000-00-00 'can not be represented as java.sql.Timestamp ...

  • Struts2 + hibernate + spring problem user log in

    dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q

Leave a Reply

Recent
Recent Entries
Tag Cloud
Random Entries