sbornstein2
asked on
Javascript Help with Function
Hello all. I have this javascript to update a characters remaining count on a control. The thing is I need to update this on 3 total controls. How can I pass this in to 3 separate span tags each one having a character count. Here is what I have now. I need to have 3 different span counts for each editor. The editor is a text control on the form. There is 3 of them now. I will show you how it looks here:
JAVASCRIPT IN FORM:
<script type="text/javascript">
var maxTextLength = 8000;
var messageText = 'You are not able to type more than ' + maxTextLength + ' characters!';
var counter = document.getElementById("c ounter");
var limiter = document.getElementById("l imiter");
counter.innerHTML = 8000;
function isAlphaNumericKey(keyCode)
{
if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
{
return true;
}
return false;
}
function LimitCharacters(editor)
{
editor.AttachEventHandler ("onkeydown", function (e)
{
counter.innerHTML = 7999 - editor.GetText().length;
e = (e == null)? window.event : e;
if (isAlphaNumericKey(e.keyCo de))
{
textLength = editor.GetText().length;
if (textLength >= maxTextLength)
{
limiter.innerHTML = messageText;
e.returnValue = false;
return false;
}
}
});
editor.AttachEventHandler ("onpaste", function (e)
{
var textLength = CalculateLength (editor);
if (textLength >= maxTextLength)
{
alert(messageText);
e.returnValue = false;
e.cancelBubble = true;
return false;
}
});
}
function CalculateLength(editor)
{
var textLength = editor.GetText().length;
var clipboardLength = window.clipboardData.getDa ta("Text") .length;
textLength += clipboardLength;
return textLength;
}
function OnClientCommandExecuting(e ditor, commandName, oTool)
{
if (commandName == "PasteFromWord"
|| commandName == "PasteFromWordNoFontsNoSiz es"
|| commandName == "PastePlainText"
|| commandName == "PasteAsHtml"
|| commandName == "Paste" )
{
if (document.all)
{
var textLength = CalculateLength (editor);
if (textLength >= maxTextLength)
{
alert(messageText);
return false;
}
}
}
}
</script>
ASPX FORM:
Character Counter: <span id="counter"></span>
<span id="limiter" style="color:Red;font-weig ht:bold;"> </span>
Editor Control: Right now each control would overwrite the character count with the new number. I need this to happen separatly a count for each control.
<rade:radeditor id="RadEditorATB" runat="server" Width="80%" Skin="WebBlue" ShowHtmlMode="False" ShowPreviewMode="False" ShowSubmitCancelButtons="F alse" StripFormattingOnPaste="MS Word" OnClientCommandExecuting=" OnClientCo mmandExecu ting" OnClientLoad="LimitCharact ers">
</rade:radeditor>
<rade:radeditor id="RadEditorATA" runat="server" Width="80%" Skin="WebBlue" ShowHtmlMode="False" ShowPreviewMode="False" ShowSubmitCancelButtons="F alse" StripFormattingOnPaste="MS Word" OnClientCommandExecuting=" OnClientCo mmandExecu ting" OnClientLoad="LimitCharact ers"></rad e:radedito r>
<rade:radeditor id="RadEditorFP" runat="server" CssClass="BookInformationT extEditor" Width="80%" Skin="WebBlue" ShowHtmlMode="False" ShowPreviewMode="False" ShowSubmitCancelButtons="F alse" StripFormattingOnPaste="MS Word" OnClientCommandExecuting=" OnClientCo mmandExecu ting" OnClientLoad="LimitCharact ers"></rad e:radedito r>
JAVASCRIPT IN FORM:
<script type="text/javascript">
var maxTextLength = 8000;
var messageText = 'You are not able to type more than ' + maxTextLength + ' characters!';
var counter = document.getElementById("c
var limiter = document.getElementById("l
counter.innerHTML = 8000;
function isAlphaNumericKey(keyCode)
{
if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
{
return true;
}
return false;
}
function LimitCharacters(editor)
{
editor.AttachEventHandler ("onkeydown", function (e)
{
counter.innerHTML = 7999 - editor.GetText().length;
e = (e == null)? window.event : e;
if (isAlphaNumericKey(e.keyCo
{
textLength = editor.GetText().length;
if (textLength >= maxTextLength)
{
limiter.innerHTML = messageText;
e.returnValue = false;
return false;
}
}
});
editor.AttachEventHandler ("onpaste", function (e)
{
var textLength = CalculateLength (editor);
if (textLength >= maxTextLength)
{
alert(messageText);
e.returnValue = false;
e.cancelBubble = true;
return false;
}
});
}
function CalculateLength(editor)
{
var textLength = editor.GetText().length;
var clipboardLength = window.clipboardData.getDa
textLength += clipboardLength;
return textLength;
}
function OnClientCommandExecuting(e
{
if (commandName == "PasteFromWord"
|| commandName == "PasteFromWordNoFontsNoSiz
|| commandName == "PastePlainText"
|| commandName == "PasteAsHtml"
|| commandName == "Paste" )
{
if (document.all)
{
var textLength = CalculateLength (editor);
if (textLength >= maxTextLength)
{
alert(messageText);
return false;
}
}
}
}
</script>
ASPX FORM:
Character Counter: <span id="counter"></span>
<span id="limiter" style="color:Red;font-weig
Editor Control: Right now each control would overwrite the character count with the new number. I need this to happen separatly a count for each control.
<rade:radeditor id="RadEditorATB" runat="server" Width="80%" Skin="WebBlue" ShowHtmlMode="False" ShowPreviewMode="False" ShowSubmitCancelButtons="F
</rade:radeditor>
<rade:radeditor id="RadEditorATA" runat="server" Width="80%" Skin="WebBlue" ShowHtmlMode="False" ShowPreviewMode="False" ShowSubmitCancelButtons="F
<rade:radeditor id="RadEditorFP" runat="server" CssClass="BookInformationT
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Out of curiosity: why the 8,000 character limit?
ASKER
trying it now :). thanks so much for your help
ASKER
one weird thing is the 8000 character initial innerHtml does not show up and when I press a key I get counter is null error. But if I place some of it at the bottom of the page it works. Am I going to have to split up where the javascript it layed out?
ASKER
ya keep getting counter null error. Here is what I have now..
<span id="counter"></span> characters remaining. <span id="limiter" style="color:Red;font-weig ht:bold;"> </span>
<span id="counter1"></span> characters remaining. <span id="limiter1" style="color:Red;font-weig ht:bold;"> </span>
<span id="counter2"></span> characters remaining. <span id="limiter2" style="color:Red;font-weig ht:bold;"> </span>
<script type="text/javascript">
var maxTextLength = 8000;
var messageText = 'You are not able to type more than ' + maxTextLength + ' characters!';
var counter = document.getElementById("c ounter");
var counter1 = document.getElementById("c ounter1");
var counter2 = document.getElementById("c ounter2");
var limiter = document.getElementById("l imiter");
var limiter1 = document.getElementById("l imiter1");
var limiter2 = document.getElementById("l imiter2");
counter.innerHTML = 8000;
counter1.innerHTML = 8000;
counter2.innerHTML = 8000;
function isAlphaNumericKey(keyCode)
{
if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
{
return true;
}
return false;
}
function selectCounter(editor)
{
var id = editor.id;
if(id == "RadEditorATB")
{
return document.getElementById("c ounter");
}
else if(id == "RadEditorATA")
{
return document.getElementById("c ounter1");
}
else if(id == "RadEditorFP")
{
return document.getElementById("c ounter2");
}
}
function selectLimiter(editor)
{
var id = editor.id;
if(id == "RadEditorATB")
{
return document.getElementById("l imiter");
}
else if(id == "RadEditorATA")
{
return document.getElementById("l imiter1");
}
else if(id == "RadEditorFP")
{
return document.getElementById("l imiter2");
}
}
function LimitCharacters(editor)
{
var counter = selectCounter(editor);
var limiter = selectLimiter(editor);
editor.AttachEventHandler ("onkeydown", function (e)
{
counter.innerHTML = 7999 - editor.GetText().length;
e = (e == null)? window.event : e;
if (isAlphaNumericKey(e.keyCo de))
{
textLength = editor.GetText().length;
if (textLength >= maxTextLength)
{
limiter.innerHTML = messageText;
e.returnValue = false;
return false;
}
}
});
editor.AttachEventHandler ("onpaste", function (e)
{
var textLength = CalculateLength (editor);
if (textLength >= maxTextLength)
{
alert(messageText);
e.returnValue = false;
e.cancelBubble = true;
return false;
}
});
}
function CalculateLength(editor)
{
var textLength = editor.GetText().length;
var clipboardLength = window.clipboardData.getDa ta("Text") .length;
textLength += clipboardLength;
return textLength;
}
function OnClientCommandExecuting(e ditor, commandName, oTool)
{
if (commandName == "PasteFromWord"
|| commandName == "PasteFromWordNoFontsNoSiz es"
|| commandName == "PastePlainText"
|| commandName == "PasteAsHtml"
|| commandName == "Paste" )
{
if (document.all)
{
var textLength = CalculateLength (editor);
if (textLength >= maxTextLength)
{
alert(messageText);
return false;
}
}
}
}
</script>
it looks like from the initial inherhtml where it will say 8000 characters remaining it has to be above the JS code. But I will need this possibly below the controls
<span id="counter"></span> characters remaining. <span id="limiter" style="color:Red;font-weig
<span id="counter1"></span> characters remaining. <span id="limiter1" style="color:Red;font-weig
<span id="counter2"></span> characters remaining. <span id="limiter2" style="color:Red;font-weig
<script type="text/javascript">
var maxTextLength = 8000;
var messageText = 'You are not able to type more than ' + maxTextLength + ' characters!';
var counter = document.getElementById("c
var counter1 = document.getElementById("c
var counter2 = document.getElementById("c
var limiter = document.getElementById("l
var limiter1 = document.getElementById("l
var limiter2 = document.getElementById("l
counter.innerHTML = 8000;
counter1.innerHTML = 8000;
counter2.innerHTML = 8000;
function isAlphaNumericKey(keyCode)
{
if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
{
return true;
}
return false;
}
function selectCounter(editor)
{
var id = editor.id;
if(id == "RadEditorATB")
{
return document.getElementById("c
}
else if(id == "RadEditorATA")
{
return document.getElementById("c
}
else if(id == "RadEditorFP")
{
return document.getElementById("c
}
}
function selectLimiter(editor)
{
var id = editor.id;
if(id == "RadEditorATB")
{
return document.getElementById("l
}
else if(id == "RadEditorATA")
{
return document.getElementById("l
}
else if(id == "RadEditorFP")
{
return document.getElementById("l
}
}
function LimitCharacters(editor)
{
var counter = selectCounter(editor);
var limiter = selectLimiter(editor);
editor.AttachEventHandler ("onkeydown", function (e)
{
counter.innerHTML = 7999 - editor.GetText().length;
e = (e == null)? window.event : e;
if (isAlphaNumericKey(e.keyCo
{
textLength = editor.GetText().length;
if (textLength >= maxTextLength)
{
limiter.innerHTML = messageText;
e.returnValue = false;
return false;
}
}
});
editor.AttachEventHandler ("onpaste", function (e)
{
var textLength = CalculateLength (editor);
if (textLength >= maxTextLength)
{
alert(messageText);
e.returnValue = false;
e.cancelBubble = true;
return false;
}
});
}
function CalculateLength(editor)
{
var textLength = editor.GetText().length;
var clipboardLength = window.clipboardData.getDa
textLength += clipboardLength;
return textLength;
}
function OnClientCommandExecuting(e
{
if (commandName == "PasteFromWord"
|| commandName == "PasteFromWordNoFontsNoSiz
|| commandName == "PastePlainText"
|| commandName == "PasteAsHtml"
|| commandName == "Paste" )
{
if (document.all)
{
var textLength = CalculateLength (editor);
if (textLength >= maxTextLength)
{
alert(messageText);
return false;
}
}
}
}
</script>
it looks like from the initial inherhtml where it will say 8000 characters remaining it has to be above the JS code. But I will need this possibly below the controls
oh yeah, this won't work at the top of the page:
counter.innerHTML = 8000;
counter1.innerHTML = 8000;
counter2.innerHTML = 8000;
because the counters are at the bottom of the page and we render from the top
you could TRY this: <script type="text/javascript" defer="defer">
moving the lines above to the bottom of the page would work too:
<script type="text/javascript" defer="defer">
counter.innerHTML = 8000;
counter1.innerHTML = 8000;
counter2.innerHTML = 8000;
</script>
counter.innerHTML = 8000;
counter1.innerHTML = 8000;
counter2.innerHTML = 8000;
because the counters are at the bottom of the page and we render from the top
you could TRY this: <script type="text/javascript" defer="defer">
moving the lines above to the bottom of the page would work too:
<script type="text/javascript" defer="defer">
counter.innerHTML = 8000;
counter1.innerHTML = 8000;
counter2.innerHTML = 8000;
</script>
ASKER
i still get a error though counter is null. But my alerts are not even getting into before anywhere it says counter.
ASKER
PERFECT it was the defer
ASKER
only working for counter for some reason counter1 and counter2 get nulls
ASKER
is there another way to get the editor id because it keeps coming up undefined
function selectCounter(editor)
{
var id = editor.id;
if(id == "RadEditorATB")
{
return document.getElementById("c
}
else if(id == "RadEditorATA")
{
return document.getElementById("c
}
else if(id == "RadEditorFP")
{
return document.getElementById("c
}
}
function selectLimiter(editor)
{
var id = editor.id;
if(id == "RadEditorATB")
{
return document.getElementById("l
}
else if(id == "RadEditorATA")
{
return document.getElementById("l
}
else if(id == "RadEditorFP")
{
return document.getElementById("l
}
}