How do I limit a textarea box?

Question

Can someone tell me how do I limit a text area to certain characters only? Let's say 250.

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>

Possible duplicate of https://stackoverflow.com/questions/5533053/textarea-character-limit — 4b0, May 26 '19 at 01:56

Code Maniac · Answer 1 · 2019-05-26T02:11:02.103

1

You can use maxlength attribute of textarea

The maximum number of characters (unicode code points) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.

<textarea col="8" rows="8" maxlength='5'></textarea>

And what if I want to show how many characters remaining? Like how I'm seeing in the comments I'm writing?

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

<textarea col="8" rows="8" maxlength='250' onkeyup="handle()" id='input' value=''></textarea>
<p id='remaining'></p>

edited May 26 '19 at 02:11

answered May 26 '19 at 01:52

Code Maniac

37,143
5
39
60

And what if I want to show how many characters remaining? Like how I'm seeing in the comments I'm writing? – BillNathan May 26 '19 at 01:57
Subtract the text area's value.length from the maxLength value. – Drew Reese May 26 '19 at 02:02
@DrewReese Any example? – BillNathan May 26 '19 at 02:04
@BillNathan you can subtract value from maxlength, you can check update answer – Code Maniac May 26 '19 at 02:08
@CodeManiac Thanks Code! Lastly, how do I keep showing 250 characters remaining by default and it starts to reduce then? :) – BillNathan May 26 '19 at 02:10
@BillNathan you can add a initial value in `p` tag and than the same as above example – Code Maniac May 26 '19 at 02:12
@CodeManiac This is awesome. I have updated my code too, and it works smooth! I hope you can help me with the last inter-linked query. What if at 100 words I want to turn the text yellow and on 0 words red. So I can notify user you're nearly reaching the word count, and then you've reached the limit. – BillNathan May 26 '19 at 02:18
@BillNathan in the same function where we are adding innerText to p tag, you can update style based on the remaining characters – Code Maniac May 26 '19 at 02:20
I guess I can do one style but how about three styles? Black, yellow, red? Any example? – BillNathan May 26 '19 at 02:22
@BillNathan you need not to do anything for `black` as it is default, and you will be having only one color at a time so based on remaining characters you can use `if else` condition to add style, try once if you still found it difficult let me – Code Maniac May 26 '19 at 02:24
@CodeManiac I found one more issue in this. If the value is preset it doesn't count the remaining words. See my example. – BillNathan May 26 '19 at 02:34

How do I limit a textarea box?

1 Answers1