View Full Version : TextArea that doesn't do line break when pressing ENTER

20 Dec 2010, 4:02 AM
How do I override the ENTER event of a TextArea such that pressing ENTER wouldn't do a line break in the text area? Instead it could do the line break only when you press shift+enter.

20 Dec 2010, 4:11 AM
You gotta set

enterIsSpecial = true

on the component and then override the event "specialkey"

havent done this yet myself otherwise Id post an example for you. let me know if this works though!

20 Dec 2010, 4:44 AM
I tried:

enterIsSpecial : true
}); but that doesn't work, thanks for your reply anyway, Foster.

20 Dec 2010, 5:14 AM
Maybe I was too quick, it doesn't work now...

20 Dec 2010, 7:01 AM
I have also tried the following in a class that extends TextArea:

fireKey : function(e){
if(e.isSpecialKey() && (this.enterIsSpecial || (e.getKey() != e.ENTER || e.hasModifier()))){
// Following config options on the component
listeners: {
specialkey: {fn: function(field, e){
if(e.isSpecialKey() && (e.keyCode == e.ENTER)){
alert('value of field: ' + field.getValue());


However, I still get the line break right before I get the alert message. Is it possible to remove the line break behaviour with enter? I have been studying the source code of TextArea, but can't find anything in the code that adds the line break, am I missing anything?

21 Dec 2010, 1:26 AM
I just edited my last post to make it more understandable. Any possible tips of why I can't override the line break behavior? Any reply is much appreciated!

21 Dec 2010, 6:07 AM
The event is bubbling up because you're not returning false or calling e.stopEvent()

21 Dec 2010, 7:03 AM
Thanks for your reply, mschwartz. In which code block should return false be placed?

I tried both in listeners and fireKey, but didn't work.

Also, in the fireKey event, what I get is: e.isSpecialKey() is false, this.enterIsSpecial is true, and e.getKey() is undefined. Don't know the reason for this.

21 Dec 2010, 7:07 AM
I don't know about this specialKey stuff. I've done enableKeyEvents: true and used the keyDown event to look at keys in this kind of case.

For example, I have an extension I wrote:


Ext.ux.form.AddressField = Ext.extend(Ext.form.TextArea, {
height: 40,
enableKeyEvents: true,
onRender: function() {
Ext.ux.form.AddressField.superclass.onRender.apply(this, arguments);
var me = this;
var el = this.el;

el.applyStyles({ textTransform: 'uppercase' });
this.mon(el, 'keyup', function() {
this.on('keydown', function(ta, e) {
var key = e.getCharCode();
if (key == Ext.EventObject.ENTER) {
var v = ta.getValue();
if (v.indexOf('\n') !== -1) {
getValue: function() {
return Ext.ux.form.AddressField.superclass.getValue.apply(this, arguments).toUpperCase();
Ext.reg('addressfield', Ext.ux.form.AddressField);

It's rather simple. It's a 2 line (height 40) textarea that acts as an address field. You enter up to two lines of address, as in:

1 Main St
Attn someone

It also forces uppercase.