TextArea remaining word Count plugin

Effects such as:

JS Code:

/** * TEXTAREA Word count * * Created on:2015-6-26, 11:49:24 * author:tom [email protected] */var Wordtool = {/ * * Initialize * * @param JSON JSON array format, e.g. [{ID: "News1", max:300}, {id: "News2", max:600}] */Init:function (j Son) {$.each (JSON, function (I, item) {var id = item.id; var max = Item.max;//Create an anonymous div, add itself to it, get textarea own HTML my self_html = $ (' <div> '). Append ($ (' # ' +id). Clone ()). HTML (); html = ' <div class= ' wordCount ' +id+ ' ">"; HTML + = myself_html; HTML + = ' <span class= "WordWrap" ><var class= "word" > ' +max+ ' </var>/' +max+ ' </span> '; HTML + = ' </div> ';  $ (' # ' +id). replacewith (HTML); Wordtool.statinputnum (ID);    });    Wordtool.initcss ();  },/** * remaining word count * * @param ID TEXTAREA ID */statinputnum:function (ID) {//TextArea and Count count Dom node var div = $ ('. ') +id) var TextArea = Div.find (' # ' +id), var wordwrap = Div.find (". word"); var max = Wordwrap.text (); Textarea[0]. SetAttribute ("MaxLength", max); var curlength = Textarea.val (). Length;wordwrap.text (Max-curlength); Textarea.on (' Input PropertyChange ', function () {Wordwrap.text (Max-$ (this). Val (). length);},/** * Initialize style */initcss:function (ID) {$ (". WordCount"). css ({"position": "R Elative "}); $ (". WordCount. WordWrap"). css ({"position": "Absolute", "right": "6px", "Bottom": "6px"}); $ (". WordCount. Word"). css ({"Color": "#990000", "padding": "0 4px"}); }}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

TextArea remaining word Count plugin