Hi, I wrote some time ago a Javascript object to handle this case (requires prototype.js). You could maybe improve it in order to get twitter's negative char count.
document.observe('dom:loaded', function(event){ new LiveTextArea('fieldID', 'countPanelID', 1000, {templateString:"#{count}/1000 chars",prohibitSubmit:true, onSubmitCancelled:function(context){ alert('Size limit exceeded ('+context.charCount+'/100)'); } }); }); Code below /** * Counts the number of characters within a text input and displays the charcount in the * given html element (div, span) * field : ID of the field to monitor * infopane : ID of the html element which will be updated with the charcount (span, div) * limit : maximum allowed char number * options : * - templateString : the string that will be displayed when the maximum char number is reached. this string can contain the #{count} parameter * - prohibitSubmit : if true prevents the form to be submitted if the maximum char count is reached * - onLimitExceeded : function callback called when the maximum char count is reached * - onSubmitCancelled : function callback called before cancelling the form submission */ var LiveTextArea=Class.create({ initialize: function(field, infopane, limit, options){ this.field=$(field); this.infopane=$(infopane); this.limit=limit; this.options=options; if(options && options.templateString){ this.templateString=new Template(options.templateString); }else{ this.templateString=new Template("#{count}/"+this.limit); } if(options && options.prohibitSubmit){ $A(this.field.ancestors()).each(function(item, index){ if(item instanceof HTMLFormElement){ Event.observe(item, 'submit', this.handleSubmit.bind(this)); return; } }.bind(this)); } Event.observe(this.field, 'change', this.updateInfoPane.bind(this)); Event.observe(this.field, 'keyup', this.updateInfoPane.bind(this)); Event.observe(this.field, 'keydown', this.updateInfoPane.bind(this)); this.updateInfoPane(); }, updateInfoPane: function(event){ var chars=this.charCount(); if(chars>=this.limit && this.options && this.options.onLimitExceeded){ this.options.onLimitExceeded({charCount:chars}); } this.infopane.update(this.templateString.evaluate({count:chars})); }, charCount: function(){ var tmp=$F(this.field); var lf=tmp.split('\n').length-1; return tmp.length+lf; }, handleSubmit: function(event){ if(this.charCount()>this.limit){ if(this.options && this.options.onSubmitCancelled){ this.options.onSubmitCancelled({charCount:this.charCount()}); } event.stop(); return false; } }, Le 11 oct. 2010 à 13:50, Paul Hoadley a écrit : > Hello, > > I have a use case for a textarea with a Twitter-style character countdown > from some specifiable limit. Specifically: > > 1. Text area with a character limit count somewhere nearby. > 2. Count decreases by one for each character typed. > 3. Count decreases by the total length of anything pasted in. > 4. Excess content is not prevented, but the count goes negative. > > Basically, I'm describing exactly (New)Twitter's widget. (I want to use it > for SMS message content.) > > So, here's me as an optimist: does anyone have or know of a WOComponent that > does exactly this that I can just drop right in? :-) Failing that, I'm not > up to speed on Twitter's API or, in particular, exactly what parts of their > UI are re-usable—does anyone know if this widget is freely usable in any > form? Failing that, can anyone recommend a good Javascript implementation of > something like this, preferably _not_ using JQuery (as I want to just drop it > into pages already using Ajax.framework)? > > Failing all of those, I'll write one myself. > > > -- > Paul. > > http://logicsquad.net/ > > > _______________________________________________ > Do not post admin requests to the list. They will be ignored. > Webobjects-dev mailing list (Webobjects-dev@lists.apple.com) > Help/Unsubscribe/Update your Subscription: > http://lists.apple.com/mailman/options/webobjects-dev/f.jecker%40symaris.com > > This email sent to f.jec...@symaris.com
_______________________________________________ Do not post admin requests to the list. They will be ignored. Webobjects-dev mailing list (Webobjects-dev@lists.apple.com) Help/Unsubscribe/Update your Subscription: http://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com This email sent to arch...@mail-archive.com