0

I have this code:

<script type="text/javascript">
var maxLength=10;
function charLimit(el) {
    if (el.value.length > maxLength) return false;
    return true;
}

function characterCount(el) {
    var charCount = document.getElementById('charCount');
    if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
    if (charCount) charCount.innerHTML = maxLength - el.value.length;
    return true;
}
</script>

together with this input field:

<input type="text" onKeyPress="return charLimit(this)" onKeyUp="return characterCount(this)" />
<span id="charCount">10</span>

As it is now, it's counting down the characters typed, from 10 to 0. I want to add some code to it, where when the page is loaded, it will show 10 (enter 3 characters minimum), and when those three characters are entered, the text in the ( ) will be gone, and only the number will be left, i.e. 7.

Also, if you erase the entered text, if character count is less than 3, the text in the ( ) to be shown again, i.e. something like this: 8 (enter 3 characters minimum)

Or even better, if it can be made like this:

10 (0 characters entered out of 3 miniumum)
9 (1 characters entered out of 3 miniumum)
8 (2 characters entered out of 3 miniumum)
7

It doesn't need to be the current code I have, suggest other code if you have.

JJJ
  • 32,902
  • 20
  • 89
  • 102
Nikola Nastevski
  • 917
  • 5
  • 14
  • 25
  • Have you tried making a solution yourself, or are you expecting a complete solution from us? – Bojangles Mar 25 '12 at 12:21
  • 1
    What you ask for isn't a "little tweak" as @Jam also said, but rather whole new "feature". You have to start by adding extra `` with its own ID, beside the `charCount` span, then update its text every time, and hide/show it as required. Give this a try and update the question with your efforts and where you're stuck in case you'll still need help. – Shadow The GPT Wizard Mar 25 '12 at 12:26
  • user1150525 made it happen ;) – Nikola Nastevski Mar 25 '12 at 13:26

1 Answers1

4

Because noone wrote an answer, I will write one. (Even if it doesn't look like you tried it yourself.)

function characterCount(el) {
    var charCount = document.getElementById('charCount');
    if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
    if (charCount) charCount.innerHTML = maxLength - el.value.length;
    return true;
}

to

function characterCount(el) {
    var charCount = document.getElementById('charCount');
    if (el.value.length > maxLength) el.value = el.value.substring(0,maxLength);
    if (charCount) {
        if(el.value.length < 3) {
            charCount.innerHTML = (maxLength - el.value.length) + ' (' + (3 - el.value.length) + ' out of 3 characters minimum)';
        } else {
            charCount.innerHTML = maxLength - el.value.length;
        }
    }
    return true;
}
  • Ok, this was quick and it's working as it should, thank you so much for the code. One question, though, is it possible to be made that ( ) text is shown on page load? Now it's shown when you start typing... Thanks. – Nikola Nastevski Mar 25 '12 at 12:43
  • 2
    Sorry, I was away for some minutes. You have to change 10 to 10 (0 out of 3 characters minimum) –  Mar 25 '12 at 12:51
  • Hey, no need to apologise, you are the best :) It's working as I wanted, thank you so much, really appreciate it. – Nikola Nastevski Mar 25 '12 at 13:01