How to show remaining characters if the textarea is prefilled?

Question

If I have prefilled textarea, the 250 characters don't actually count the default words already in there. It only starts counting if you start typing something in it.

Also, how do I change the text color to yellow on "100 characters remaining" and change to red on "0 characters remaining"

Can someone help please?

function handle(){
  let element = document.getElementById('input')
  let value = element.value
  let maxLength = element.maxLength
  document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`
  
}

<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

Aaron3219 · Accepted Answer · 2019-05-26T12:24:41.920

1

the 250 characters don't actually count the default words already in there. It only starts counting if you start typing something in it.

Just run your function once on page load:

function handle() {
  let element = document.getElementById('input')
  let value = element.value
  let maxLength = element.maxLength
  document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`
}

handle();

<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

how do I change the text color to yellow on "100 characters remaining" and change to red on "0 characters remaining"

Do an if on each keyup:

function handle() {
  let element = document.getElementById('input');
  let value = element.value;
  let maxLength = element.maxLength;
  document.getElementById('remaining').innerText = `${maxLength - Number(value.length)} characters remaining`;

  if (maxLength - Number(value.length) == 0) {
    document.getElementById('remaining').style.color = "red";
  } else if (maxLength - Number(value.length) <= 100) {
    document.getElementById('remaining').style.color = "yellow";
  }
}

handle();

<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id="input" value="">Hello World. Im born today.</textarea>
<p id='remaining'>250 characters remaining</p>

edited May 26 '19 at 12:24

answered May 26 '19 at 12:20

Aaron3219

2,168
4
11
28

Thanks @Aaron. What I meant was changing the color of "characters remaining" written underneath the textarea. Not the text inside the textarea? – BillNathan May 26 '19 at 12:24
Made an edit now. However, this is really something you normally have to figure out yourself! If you don't want to change the color on the `textbox` itself then just target the object you want... If you don't know how to do that you should really take a look at the basics. – Aaron3219 May 26 '19 at 12:25
Aaron when the other guy said you shouldn't load function on page load is he right? – BillNathan May 26 '19 at 12:45
It was me who said that :D. What I meant was that you shouldn't run functions in the `onload` attribute, e.g.: `content`. – Aaron3219 May 26 '19 at 12:47
Are we not also loading on load? – BillNathan May 26 '19 at 12:48
1

Do you see any `onload` attribute? I don't thinks so :D. This is stuff for another question but just a brief explanation can be found [here](https://stackoverflow.com/questions/2728922/why-not-use-javascript-handlers-on-the-body-element). What he did was **not** wrong. It just wasn't good practice. – Aaron3219 May 26 '19 at 12:51
And what if I want to use it multiple times on the same page? Because ID cannot be the same. Do I have to paste the same code three times and give unique ID's to every function? Or is there any other way? – BillNathan May 26 '19 at 12:54
Remember one thing: If you have the same code multiple times you have designed your code wrong. Also, there are many approaches to this. One of them would be to add an `keyup` event listener to the `document`and use the `event.target` instead of an ID. – Aaron3219 May 26 '19 at 13:01
1

I have not yet implemented to trigger the function once but this is a good beginning: https://jsfiddle.net/Aaron3219/mcjzkvt0/13/ – Aaron3219 May 26 '19 at 13:17

How to show remaining characters if the textarea is prefilled?

1 Answers1