Textarea with character countdown
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/archive%40mail-archive.com This email sent to arch...@mail-archive.com
Re: Textarea with character countdown
no component, but here is how we do it:
label for = messageMessage/label
wo:text value = $comments id = message onKeyUp =
return count(this,255,'myCounter') /
p class = descYou have
span id = myCounterwo:str value =
~255-comments.length //span
characters left./p
function count(a,b,c){
var dif = b-a.value.length;
while (dif 0) {
a.value=a.value.replace(/.$/,'')
dif = b-a.value.length;
}
document.getElementById(c).firstChild.data=dif;
}
Simon
On 11 October 2010 12:50, Paul Hoadley pa...@logicsquad.net wrote:
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/simon%40potwells.co.uk
This email sent to si...@potwells.co.uk
___
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
Re: Textarea with character countdown
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
Re: Textarea with character countdown
Thanks Simon and Frédéric. I will check those out. -- 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/archive%40mail-archive.com This email sent to arch...@mail-archive.com
