How to limit the amount of input characters in MultiLIne TextBox?

Question

Hi All,

I have a Multi-Line TextBox control and want to limit the amount charaters an user could input, say 200. Had tried MaxLegth func, howerver it didn't work for Multi-Line.

What is the easiest way to accomplish this task.

Thank you,

Ellen

Andy · Answer

welcome to try this code. Need ID of a) textarea b) element to display current length, assumes you have $(...) equivalent to getElementById - fix this up if you need to. usage: createCharCounterLimitedTextArea( 'post_textarea', 'post_chars', 250, _INIT ); post_textarea is the ID of the text area, post_chars is the ID of a , _INIT is set to true if you don't want to dislay the character count, suggest you hide the span using css rather than change the code. THe post_chars element replaces _**_ with the number of characters. for example:- Chars used: _**_ Other constant values such as _KEY_ENTER are the values for the corresponding keypress codes. you'll need to declare these or ammend the code to use your constant names. Hope it goes well! function createCharCounterLimitedTextArea( Id, displayId, maxchars, deferInit ) { var srcObj, dispObj; if( (srcObj = $( Id )) && (dispObj = $( displayId )) ) { srcObj.checknewlineoffset=(navigator.userAgent.match('MSIE') ? true:false); srcObj.maxchars = maxchars; srcObj.dispObj = dispObj; dispObj.markup = dispObj.innerHTML; srcObj.counter_update = function(){ this.dispObj.innerHTML=this.dispObj.markup.replace('_%%_',this.maxchars-this.value.length); } srcObj.onkeydown= function(e) { if(!e)e=window.event; this.len_pre = this.value.length; if(!e.ctrlKey && !e.altKey)//allow the user to use their keyboard! { if( this.value.length>=this.maxchars) if(!_b[e.keyCode]) return false; if( e.keyCode==_KEY_ENTER && this.value.length>=this.maxchars ) return false; //is there a potential problem inserting a newline? } } srcObj.onkeyup= function(e) { if(!e)e=window.event; this.len_post = this.value.length; if(this.checknewlineoffset)this.maxchars+=parseInt(( this.len_post - this.len_pre ) / 2 ); if(this.maxchars-this.value.length { this.value=this.value.substring(0,this.maxchars); } this.counter_update(); } srcObj.onchange = srcObj.onkeyup; // init... srcObj.init = function() { this.counter_update(); } if (!deferInit) srcObj.counter_update(); } } function createCharCounterLimitedTextBox( Id, displayId, deferInit ) { if( (srcObj = $( Id )) && (dispObj = $( displayId )) ) { srcObj.dispObj = dispObj; dispObj.markup = dispObj.innerHTML; srcObj.counter_update = function(){ this.dispObj.innerHTML=this.dispObj.markup.replace('_%%_',this.maxLength-this.value.length); } srcObj.onkeyup= function(e) { this.counter_update(); } srcObj.onchange = srcObj.onkeyup; // init... srcObj.init = function() { this.counter_update(); } if (!deferInit) srcObj.counter_update(); } }

Niradhip Chakraborty · Answer

Hi Ellen, I am extreamly sorry for the late reply. Well if you stucked with that code,you can refer the code from following article.It will help you out. http://forums.asp.net/t/1251514.aspx

Ellen Hu · Answer

They come from ASC table, but why you only choose those. Thanks, Ellen

Ellen Hu · Answer

Would you please explain to me which value I should put for ignoreKeys ? If the limit is 200, which value I have to use for ignoreKeys ? I tried to change the number from 50 to 200, but the cursor still stoped at the same place as using 50. var ignoreKeys txtMission.Attributes.Add( "OnKeyPress" , "return textMaxLength(this, '50' , event)" );

Ellen Hu · Answer

Thank you so much for your help. It seems have problem to work on my production code which has Ajax control; it will not stop my typing. Then I created a simple project with only one textbox on it, your code works perfectly. Once reached the max length, the cursor stops moving. Confusing….. why?

Niradhip Chakraborty · Answer

You can call the javascript function on keypress in page behind. use java script code in .aspx page and call it in .aspx.cs page you can solve your focus problem only using onkeypress event.It wont allow user to type. Just do it in following way.If you have still any doubt please let me know with your code. .aspx page code: function textMaxLength(obj, maxLength, evt) { var charCode=(evt.which) ? evt.which : event.keyCode var max = maxLength - 0; var text = obj.value; if(text.length > max) { var ignoreKeys = [8,46,37,38,39,40,35,36]; for(i=0;i { if(charCode==ignoreKeys[i]) { return true; } } return false; }else { return true; } } .aspx.cs code: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { txtTitle.Attributes.Add("OnKeyPress", "return textMaxLength(this, '50', event)"); } }

Ellen Hu · Answer

Thank you all for the help. I decided to go with following. Want to try OnKeyPress, however, it shows me OnKeyPress is not a property of TextBox. Maybe there is some func I am not aware. asp : RegularExpressionValidator ID ="RegularExpressionValidator3" runat ="server" ControlToValidate ="txtTitle" Display ="Dynamic" ErrorMessage =" Please limit to 50 characters or less." ValidationExpression ="[\s\S]{1,50}"> asp : RegularExpressionValidator > This sulution has a drawback that the validation will accour only after changing focus, will not stop user to type while it has focus. Thanks, Ellen

Niradhip Chakraborty · Answer

No the max length doesn't work as the html tag rendered is a textarea tag, which has no MaxLength property. You will need to use a Validator control to ensure the length doesn't exceed the MaxLength. You could use a RegExValidator or derive your own from CustomValidator. You can use javascript to accomplish this. Try this: javascript: function textMaxLength(obj, maxLength, evt) { var charCode=(evt.which) ? evt.which : event.keyCode var max = maxLength - 0; var text = obj.value; if(text.length > max) { var ignoreKeys = [8,46,37,38,39,40,35,36]; for(i=0;i { if(charCode==ignoreKeys[i]) { return true; } } return false; }else { return true; } } for the html part : onKeyPress="return textMaxLength(this, '200', event);"

Mike Hankey · Answer

Ellen, One way you could do this is to handle the TextChanged event and check the length each time. When limit is reached you could trigger some event...MessageBox, Beep or whatever! Hope this helps Mike