/    Sign up×
Community /Pin to ProfileBookmark

Character counter, need help to expand functionality

Copy linkTweet thisAlerts:
Sep 14.2004

Hello all!

I’m using this bit of JS code I downloaded to count how many characters are in a text field:

<script language = “Javascript”>
/**
* DHTML textbox character counter (IE4+) script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/)
*/

function taLimit() {
var taObj=event.srcElement;
if (taObj.value.length==taObj.maxLength*1) return false;
}

function taCount(visCnt) {
var taObj=event.srcElement;
if (taObj.value.length>taObj.maxLength*1) taObj.value=taObj.value.substring(0,taObj.maxLength*1);
if (visCnt) visCnt.innerText=taObj.value.length;
}
</script>

I have this tag for the field itself:

<textarea onkeypress=”return taLimit()” onkeyup=”return taCount(myCounter)” maxLength=”75″ wrap=physical rows=”2″ name=”AgentTitle” cols=”40″>

And I also have a span bit near it that counts the characters used:
<span id=myCounter>0</span> of 75 characters used

With my limited knowledge of JavaScript I cannot figure out how to make that bit of “SPAN” tell the user the number of characters in the field, if it already has stuff in it. Can someone help me out?

Thanks a bunch!!

Natalia

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@sciguyryanSep 14.2004 — Wel, try this:

<i>
</i>&lt;script type="text/javascript"&gt;
&lt;!--
function taCount(visCnt) {
var SpanElm = document.getElementById("Your SPANS ID Here");
var taObj = event.srcElement;
if (taObj.value.length &gt; taObj.maxLength * 1){
taObj.value = taObj.value.substring(0, taObj.maxLength * 1);
}
if (visCnt){
visCnt.innerText = taObj.value.length;
SpanElm.innerHTML = taObj.value.length;
}
//--&gt;
&lt;/script&gt;



And change Your SPANS ID Here to the ID or Name of your span tag.

RyanJ
Copy linkTweet thisAlerts:
@David_HarrisonSep 14.2004 — Here's a complete re-written script, it's a lot simpler than your current one.

[upl-file uuid=de771a32-d4b6-4e24-bee6-a39695bea3cb size=2kB]count.txt[/upl-file]
Copy linkTweet thisAlerts:
@java_dynamicsSep 14.2004 — If the text field in question is a <textarea onkeypress='count()'> or <input type="text"> you can count characters like this:

<script language="javascript" type="text/javascript">

<!--//

function count()

{

var c_chars=document.all('ID HERE').value;

var c_charsL=c_chars.length;

}

//-->

</script>
Copy linkTweet thisAlerts:
@NatuScapeauthorSep 14.2004 — Hi again,

Lavalamp's code works perfectly and it's a lot simpler, thanks for that! My problem is still that I don't know how to display the value of the count when we first get to the page, because in this particular page the user is editing an existing record, so there's info in that field. How can I have JS count the length of the field and type it out?

Thanks again for all your help!!

Natalia
Copy linkTweet thisAlerts:
@David_HarrisonSep 14.2004 — java_dynamics, document.all is IE only, therefore it would be more advantageous to use document.getElementById("ID HERE")

The only reason the script is so long is because of the way I chose to write the new content into the page, I used the W3C DOM which all modern browsers support, I could have just used innerHTML however that is not part of the W3C DOM and is therefore not valid (even though it is widely supported).

In the W3C's defence, using the DOM for simply writing a bit of text into the page may cause long(ish) code, but when used for complicated effects it really comes into it's own.

NatuScape, Change the code to this:&lt;form action="#"&gt;

&lt;p&gt;
&lt;label for="something"&gt;All your text are belong to us:&lt;/label&gt;&lt;br&gt;
&lt;textarea id="something" name="somethingelse" rows="5" cols="20" onkeyup="count(this);"&gt;&lt;/textarea&gt;
&lt;/p&gt;

&lt;p id="counter"&gt;&lt;/p&gt;

&lt;script type="text/javascript"&gt;&lt;!--
count(document.getElementById("something"));
//--&gt;&lt;/script&gt;

&lt;/form&gt;By calling the function immediately after the textarea and paragraph have been created, the content will be written into the paragraph after such a small delay that it would seem to be instant. Of course, assuming that you have server-side language support, you could just use that to write the initial content into the paragraph.
Copy linkTweet thisAlerts:
@NatuScapeauthorSep 15.2004 — Awesome!! That totally did the trick!!

Thanks,

Natalia
Copy linkTweet thisAlerts:
@David_HarrisonSep 15.2004 — Happy to help. ?
×

Success!

Help @NatuScape spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...