By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,302 Members | 3,621 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,302 IT Pros & Developers. It's quick & easy.

Restricting the length of a text field, trim if needed, all on page load.

P: 5
Ok I am trying to do the above, I have got a script that will restrict the length but it requires the user to enter the field and hit a key, before it will work.

This would normaly be find, but the title field gets its information from a previouse page so its value can easily be over 40 chars. (I can not restrict the length on the previouse page.)

The major dificulty is that there is no form on the aspx page, and I do not have access to the body tag of the page.

what I have so far is this.

my attempt to restrict onload:

Expand|Select|Wrap|Line Numbers
  1. if(window.attachEvent) {
  2.     document.body.attachEvent("onload",trimlenght);
  3.     } else {
  4.         document.body.addEventListener("load",trimlenght,False);
  5.     }
  6.  
  7. function trimlenght {
  8.     //element = document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField");
  9.     document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField").maxLength = 40
  10.     document.all.ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField.maxLength = 40 // IE only
  11. }
The field I want to restrict to 40 chars:

Expand|Select|Wrap|Line Numbers
  1. <asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server">
  2.     <SharePointWebControls:textfield runat="server" id="TitleField" FieldName="Title"/>
  3.     <script>
  4.             displaylimit("","ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField",40)
  5.         </script>
  6.     </asp:Content>
  7.  
All of the script for setting the max length:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. /*
  4. Form field Limiter script- By Dynamic Drive
  5. For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
  6. This credit MUST stay intact for use
  7. */
  8.  
  9. if(window.attachEvent) {
  10.     document.body.attachEvent("onload",trimlenght);
  11.     } else {
  12.         document.body.addEventListener("load",trimlenght,False);
  13.     }
  14.  
  15. function trimlenght {
  16.     //element = document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField");
  17.     document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField").maxLength = 40
  18.     document.all.ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField.maxLength = 40 // IE only
  19. }
  20.  
  21. if(window.attachEvent) {
  22.     document.body.attachEvent("onload",restrictinput);
  23.     } else {
  24.         document.body.addEventListener("load",restrictinput,False);
  25.     }
  26. if(window.attachEvent) {
  27.     document.body.attachEvent("onload",displaylimit);
  28.     } else {
  29.         document.body.addEventListener("load",displaylimit,False);
  30.     }
  31.  
  32.  
  33. var ns6=document.getElementById&&!document.all
  34.  
  35. function restrictinput(maxlength,e,placeholder){
  36. if (window.event&&event.srcElement.value.length>=maxlength)
  37. return false
  38. else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
  39. var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys
  40. if (pressedkey.test(String.fromCharCode(e.which)))
  41. e.stopPropagation()
  42. }
  43. }
  44.  
  45. function countlimit(maxlength,e,placeholder){
  46. var theform=eval(placeholder)
  47. var lengthleft=maxlength-theform.value.length
  48. var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
  49. if (window.event||e.target&&e.target==eval(placeholder)){
  50. if (lengthleft<0)
  51. theform.value=theform.value.substring(0,maxlength)
  52. placeholderobj.innerHTML=lengthleft
  53. }
  54. }
  55.  
  56.  
  57. function displaylimit(thename, theid, thelimit){
  58. var theform=theid!=""? document.getElementById(theid) : thename
  59. var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> characters remaining on your input limit'
  60. if (document.all||ns6)
  61. //document.write(limit_text)
  62. if (document.all){
  63. eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
  64. eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
  65. }
  66. else if (ns6){
  67. document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true); 
  68. document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true); 
  69. }
  70. }
  71.  
  72.  
  73.  
  74. </script>
And the second field that has a restricted length:

Expand|Select|Wrap|Line Numbers
  1. <PublishingWebControls:editmodepanel runat="server" id="editmodepanel11" Width="240px">
  2.         <SharePointWebControls:textfield FieldName="Stand_x0020_First" runat="server" id="TextField3">
  3.         </SharePointWebControls:TextField>
  4.         <script>
  5.             displaylimit("","ctl00_PlaceHolderMain_editmodepanel11_TextField3_ctl00_TextField",140)
  6.         </script>
  7.  
  8.  
  9.  
  10.         </PublishingWebControls:editmodepanel>
Another problem is that the counter that is meant to count down does not work either, It works fine when Im only restricting one field, but does not count down when restricting two. I have for now commented the line out that outputs the counter as its not working, If you can see why this is that would also be a great help.

So 1. need the title field to have its max length set on page load, this may mean trimming it down to the max length.

2. the counter that is meant to count down does not work for two fields.

Any help would be great.

Thank you

+ there are no spaces in my ID's this system has added them in. they are not there in my code.

cheers

just to confirm, with SharePoint I do not have access to the Head or Body tags. In affect what I am doing is working within the Body tag. so please keep that in mind.
Oct 10 '07 #1
Share this Question
Share on Google+
8 Replies


acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN!

Use substring to get the first 40 characters. See link.
Oct 15 '07 #2

P: 5
Does that not just shorten the amount of text that displays in the field?

+ how do I make it do this on page load?

I actually want to trim it, so it can not contain more then the set number of chars, so that when the page is submitted it also corrects the database info.

Does that make sense?

I'm only having this problem because it is a two step process and I can not set this in the first step, so have to do so in the second step, when the title has already been added and saved.

Sorry if I am being stupid, Im knew to javascript atm.

Thank you
Oct 16 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Currently, your trimlength function sets the maxlength property on page load. To actually trim, set the value of the text field to the first 40 chars, e.g.
Expand|Select|Wrap|Line Numbers
  1. textfield.value=textfield.value.substring(0,40);
Oct 16 '07 #4

P: 5
Brilliant thank you, I will give this a try tomorrow,

I will let you know how I get on.

Cheers
Oct 17 '07 #5

P: 5
Hello again, I ahve just looked through the script, and I have this in there already

Expand|Select|Wrap|Line Numbers
  1. function countlimit(maxlength,e,placeholder){
  2. var theform=eval(placeholder)
  3. var lengthleft=maxlength-theform.value.length
  4. var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
  5. if (window.event||e.target&&e.target==eval(placeholder)){
  6. if (lengthleft<0);
  7. theform.value=theform.value.substring(0,maxlength);
  8. placeholderobj.innerHTML=lengthleft
  9. }
  10. }
  11.  
and line 7 is doing what you have advised, but it does not do it on page load. only if you enter the text box and press a key.

Do you know how I can get it to do this when the page loads?
Oct 17 '07 #6

P: 5
Sorted it, thanks for your help.

I added

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. var title = document.getElementById('ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField');
  3. var maxlength = 40;
  4. title.value = title.value.substring(0,maxlength);
  5. </script>
to the end of my page, as I couldnt get it to work onload, think it is a sharepoint issue, there are 11 javascript files sharepoint pulls in, so I do not know how they are affecting things,

Thanks again.
Oct 17 '07 #7

acoder
Expert Mod 15k+
P: 16,027
Glad to hear you got it working. Post again if you have any more questions.
Oct 17 '07 #8

P: 98
to the end of my page, as I couldnt get it to work onload, think it is a sharepoint issue, there are 11 javascript files sharepoint pulls in, so I do not know how they are affecting things,

Thanks again.
It did probably not work in the head because the text field doesn't load until the body is loaded. So it was not defined yet.

You could make it into a function and use it with an onchange event handler instead, then you could place the script in the head and it would be called whenever the area changed.
Nov 22 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.