Calculating characters typed in a 'textarea' field

[sachintaware]

Hello
Use Case:I have a form for my SMS application(sending sms notifications to users),which has a text area field for typing or copy/pasting the message.

I want a limit on the number of characters entered to '160'(standard message length).Also,I want to display the number of characters entered currently at the bottom of window.
If user enter's happy(5 chars) the text box below should display '155 remaining'.
I have used maxLength but I also want it to read the characters to make it better for the user,as it is an sms application,it expects this to be done.



var smsForm = new Ext.form.FormPanel({

//url: 'ValidationServlet',
frame:true,
title: 'SMS Form',
width: 350,
id:'sendSmsForm',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Send To',
name:'toSms',
fieldWidth: 60,
id: 'sms-to',
msgTarget: 'side',
allowBlank: false,
x: 5,
y: 5,

anchor: '-5' // anchor width by percentage
}, /*{
fieldLabel: 'Subject',
name:'subject',
fieldWidth: 60,
x: 5,
y: 35,

anchor: '-5' // anchor width by percentage
},*/ {
x:5,
y: 65,
xtype: 'textarea',
name:'message',
fieldWidth: 90,
style: 'margin:0',
hideLabel: true,
anchor: '-5 -5', // anchor width and height
maxLength:160

}

],
buttons: [{
text: 'Send',
handler: function(){
var f = Ext.getCmp('sendSmsForm');
f.form.submit({
reset: true,
url:'EmailServlet',
method:'Post',
waitMsg:'Sending Message...',
success:function(form,action){

Ext.Msg.alert('Status', 'Message has been sent Successfully!!', function(btn, text){
if (btn == 'ok'){
// var redirect = 'success.html';
// window.location = redirect;
}
});
}
});
}

}]


});

win = Ext.widget('window', {
// title: 'Email Form',
closeAction: 'hide',
width: 500,
height: 400,
id:'send-sms-window',
minHeight: 400,
layout: 'fit',
resizable: true,
modal: true,
items: smsForm
});



Regards
Sachin

[mitchellsimoens]

You should use the keyup event and then you can calculate the number of characters left. You must enableKeyEvents also:


Ext.create('Ext.form.Panel', {
renderTo : Ext.getBody(),
width : 400,
height : 400,
items : [
{
xtype : 'textfield',
name : 'test',
fieldLabel : 'Test',
enableKeyEvents : true,
maxLength : 160,
listeners : {
keyup: function(field) {
var length = field.getValue().length,
left = field.maxLength - length;

console.log(left);
}
}
}
]
});

[slemmon]

Would the field's change event be a valid event to catch as well? For the times someone copies / pastes using the mouse instead of the keyboard?

[mitchellsimoens]

Would the field's change event be a valid event to catch as well? For the times someone copies / pastes using the mouse instead of the keyboard?

change will only fire on blur. If you press ctl + v (paste shortcut) it will fire the keyup event.

[slemmon]

I tried with the following code using the change event and it worked real-time not just on field blur and worked with FF and Chrome, but I didn't try on an older IE version. Maybe the change event fires differently on older browsers and can't be relied upon -vs- keydown?



Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
, listeners: {
change: function () {
var nabor = this.nextSibling('textfield')
nabor.setValue(this.getValue())
}
}
}, {
xtype: 'textfield',
name: 'copy',
fieldLabel: 'Copy of Name'
}]
});

[sachintaware]

Thanks to both of you for your comments,it surely helped me.

Regards
Sach