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 ([email protected])
> Help/Unsubscribe/Update your Subscription:
> http://lists.apple.com/mailman/options/webobjects-dev/f.jecker%40symaris.com
>
> This email sent to [email protected]
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list ([email protected])
Help/Unsubscribe/Update your Subscription:
http://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com
This email sent to [email protected]
