I have an input field and I added a character countdown to it via vanilla Javascript. The user can add a maximum of 60 characters and the counter shows how many characters remaining while he is typing.
When the input field is empty, it shows that 60 characters are remaining. However when there is a value in the field already (when you are not typing), it shows that 60 characters are remaining. So it's not counting the number of characters of the value. It only takes it of from the 60 when I click in the input field and start typing.
If there is a value in the field, how can I make sure its characters are deducted from the max character length automatically?
Here is my code:
const POST_TITLE = document.getElementById("post_title");
const MAX_LENGTH = 60;
const CHARS = document.getElementById("chars");
function countCharacters() {
let enteredChars = POST_TITLE.value.length;
let charsLeft = MAX_LENGTH - enteredChars;
if(charsLeft > 35) {
CHARS.textContent = charsLeft + " characters remaining. Please add more characters for better SEO.";
CHARS.style.color = "red";
} else if(charsLeft > 10) {
CHARS.textContent = charsLeft + " characters remaining. Almost there! Just add a few more characters to have a great SEO title.";
CHARS.style.color = "orange";
} else {
CHARS.textContent = charsLeft + " characters remaining. Awesome! Between 50-60 characters is a great SEO title.";
CHARS.style.color = "green";
}
if(POST_TITLE.value.length == '') {
CHARS.style.color = "black";
CHARS.textContent = charsLeft + " characters remaining. Please add a meta title.";
}
}
POST_TITLE.addEventListener("keyup", countCharacters);<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form action="#" class="mt-4">
<div class="mb-3">
<label for="post_title" class="form-label">Post title</label>
<input type="text" class="form-control" id="post_title" minlength="5" maxlength="60" value="some value">
<span id="chars">60 characters remaining. Please add a meta title.</span>
</div>
</form>
</div>So here I already added a value to the input field so you can see that when the page loads it's not counting the characters of the value. I've tried different events instead of the keyup, like input but didn't work.
As mentioned in the comment section, simply calling the countCharacters(); function under it's scope, will trigger the event that you seek for.
Note that the white spaces here do count as the characters.
const POST_TITLE = document.getElementById("post_title");
const MAX_LENGTH = 60;
const CHARS = document.getElementById("chars");
function countCharacters() {
let enteredChars = POST_TITLE.value.length;
let charsLeft = MAX_LENGTH - enteredChars;
if(charsLeft > 35) {
CHARS.textContent = charsLeft + " characters remaining. Please add more characters for better SEO.";
CHARS.style.color = "red";
} else if(charsLeft > 10) {
CHARS.textContent = charsLeft + " characters remaining. Almost there! Just add a few more characters to have a great SEO title.";
CHARS.style.color = "orange";
} else {
CHARS.textContent = charsLeft + " characters remaining. Awesome! Between 50-60 characters is a great SEO title.";
CHARS.style.color = "green";
}
if(POST_TITLE.value.length == '') {
CHARS.style.color = "black";
CHARS.textContent = charsLeft + " characters remaining. Please add a meta title.";
}
}
countCharacters();
POST_TITLE.addEventListener("keyup", countCharacters);<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form action="#" class="mt-4">
<div class="mb-3">
<label for="post_title" class="form-label">Post title</label>
<input type="text" class="form-control" id="post_title" minlength="5" maxlength="60" value="some value">
<span id="chars">60 characters remaining. Please add a meta title.</span>
</div>
</form>
</div>