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

[sneddo]

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:

if(window.attachEvent) {
    document.body.attachEvent("onload",trimlenght);
    } else {
        document.body.addEventListener("load",trimlenght,False);
    }
 
function trimlenght {
    //element = document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField");
    document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField").maxLength = 40
    document.all.ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField.maxLength = 40 // IE only
}

The field I want to restrict to 40 chars:

<asp:Content ContentPlaceholderID="PlaceHolderPageTitleInTitleArea" runat="server">
    <SharePointWebControls:textfield runat="server" id="TitleField" FieldName="Title"/>
    <script>
            displaylimit("","ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField",40)
        </script>
    </asp:Content>
 

All of the script for setting the max length:

<script type="text/javascript">
 
/*
Form field Limiter script- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/
 
if(window.attachEvent) {
    document.body.attachEvent("onload",trimlenght);
    } else {
        document.body.addEventListener("load",trimlenght,False);
    }
 
function trimlenght {
    //element = document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField");
    document.getElementById("ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField").maxLength = 40
    document.all.ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField.maxLength = 40 // IE only
}
 
if(window.attachEvent) {
    document.body.attachEvent("onload",restrictinput);
    } else {
        document.body.addEventListener("load",restrictinput,False);
    }
if(window.attachEvent) {
    document.body.attachEvent("onload",displaylimit);
    } else {
        document.body.addEventListener("load",displaylimit,False);
    }
 
 
var ns6=document.getElementById&&!document.all
 
function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}
 
function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0)
theform.value=theform.value.substring(0,maxlength)
placeholderobj.innerHTML=lengthleft
}
}
 
 
function displaylimit(thename, theid, thelimit){
var theform=theid!=""? document.getElementById(theid) : thename
var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> characters remaining on your input limit'
if (document.all||ns6)
//document.write(limit_text)
if (document.all){
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true); 
document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true); 
}
}
 
 
 
</script>

And the second field that has a restricted length:

<PublishingWebControls:editmodepanel runat="server" id="editmodepanel11" Width="240px">
        <SharePointWebControls:textfield FieldName="Stand_x0020_First" runat="server" id="TextField3">
        </SharePointWebControls:TextField>
        <script>
            displaylimit("","ctl00_PlaceHolderMain_editmodepanel11_TextField3_ctl00_TextField",140)
        </script>
 
 
 
        </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.

[acoder]

Welcome to TSDN!

Use substring to get the first 40 characters. See link.

[sneddo]

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

[acoder]

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.

textfield.value=textfield.value.substring(0,40);

[sneddo]

Brilliant thank you, I will give this a try tomorrow,

I will let you know how I get on.

Cheers

[sneddo]

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

function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0);
theform.value=theform.value.substring(0,maxlength);
placeholderobj.innerHTML=lengthleft
}
}
 

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?

[sneddo]

Sorted it, thanks for your help.

I added

<script type="text/javascript">
var title = document.getElementById('ctl00_PlaceHolderPageTitleInTitleArea_TitleField_ctl00_TextField');
var maxlength = 40;
title.value = title.value.substring(0,maxlength);
</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.

[acoder]

Glad to hear you got it working. Post again if you have any more questions.

[anonymous]

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.