I am displaying a prompt upon click, and I want to be able to limit the number of characters that the user can type in. In the extjs doc, I found information about the maxLength property, and it sounded like that was exactly what I wanted. I figured if I set the maxLength to my desired character limit, that the extjs control would automagically limit the number of characters for me. So far that has not been the case, but it does appear to be validating the input somehow because it outline the textbox in red when the maxLength limit is exceeded. Here is my current code:

var prompt, textArea;
prompt = Ext.MessageBox.prompt("Hello!", "Hint");
textArea = prompt.down('textarea');
textArea.maxLength = 140;

Alas, this does nothing to prevent the user from entering more than 140 characters.

Does anyone know how to limit the number of characters in a MessageBox like this? Or could someone tell me why maxLength is not working the way I would have expected?

Thanks

--edit--

As newmount pointed out, it looks like the correct solution to this is to set the maxLength attribute on the textarea tag. Here is a w3 schools link to an example: .asp

The issue for me was selecting the correct tag. For a textarea in ExtJS this looks like:

// true denotes multiline and causes Ext to use textarea tag for input
var prompt = Ext.MessageBox.prompt("Hello!", "Hint", "", "", true); 

prompt.textArea.inputEl.set({
    maxLength: 140
});

Seems that half the battle is selecting the correct DOM element in the sea of generated tags. Hope this helps someone in the future!

Note: the maxLength attribute is not supported in Opera or IE9 and earlier (see w3 schools link for citation).

I am displaying a prompt upon click, and I want to be able to limit the number of characters that the user can type in. In the extjs doc, I found information about the maxLength property, and it sounded like that was exactly what I wanted. I figured if I set the maxLength to my desired character limit, that the extjs control would automagically limit the number of characters for me. So far that has not been the case, but it does appear to be validating the input somehow because it outline the textbox in red when the maxLength limit is exceeded. Here is my current code:

var prompt, textArea;
prompt = Ext.MessageBox.prompt("Hello!", "Hint");
textArea = prompt.down('textarea');
textArea.maxLength = 140;

Alas, this does nothing to prevent the user from entering more than 140 characters.

Does anyone know how to limit the number of characters in a MessageBox like this? Or could someone tell me why maxLength is not working the way I would have expected?

Thanks

--edit--

As newmount pointed out, it looks like the correct solution to this is to set the maxLength attribute on the textarea tag. Here is a w3 schools link to an example: http://www.w3schools./tags/att_textarea_maxlength.asp

The issue for me was selecting the correct tag. For a textarea in ExtJS this looks like:

// true denotes multiline and causes Ext to use textarea tag for input
var prompt = Ext.MessageBox.prompt("Hello!", "Hint", "", "", true); 

prompt.textArea.inputEl.set({
    maxLength: 140
});

Seems that half the battle is selecting the correct DOM element in the sea of generated tags. Hope this helps someone in the future!

Note: the maxLength attribute is not supported in Opera or IE9 and earlier (see w3 schools link for citation).

• javascript
• html
• extjs
• extjs4.2

• 2 You'll have to use custom JS; A textarea doesn't adhere to the maxlength property – Ian Commented Feb 28, 2014 at 2:02

3 Answers 3

Starting in ExtJS 4, you can set textArea.enforceMaxLength to true to prevent the user from typing in or pasting more than maxLength characters. It also works in IE8.

use textfield's inputEl to set maxLength, fiddle: https://fiddle.sencha./#fiddle/3vg

1. Add enforceMaxLength in your ext js code.

   { enforceMaxLength : true, maxLength : 140 }