How to limit my text area field to 1000 words in my html form

Question

Hello i have an about me field on a profile page i created, but noticed that i cant copy and paste words from other documents even when my max length is set to 1000 words, When i copy and paste in the text area , it takes in 50 words or so. My about length in the database is set 2000.Below is what i have in my form. Any help offered is deeply appreciated

<div class="form-group">
 <label for="about">About Me</label>
<textarea name="about" rows="3" maxlength="1000" class="form-control" id="about"></textarea>
</div>

enter image description here

Maybe you can find the answer here https://stackoverflow.com/questions/17909646/counting-and-limiting-words-in-a-textarea — Savado, Jun 16 '20 at 07:44

score 0 · Answer 1 · edited Jul 01 '20 at 20:21

0

The tag maxlength defines the number of max characters and not max words.

Perhaps your text is more than 1000 characters so it does not work

edited Jul 01 '20 at 20:21

marc_s

732,580
175
1,330
1,459

answered Jun 16 '20 at 07:19

BeeTheKay

319
2
15

Lucas L. · Accepted Answer · 2020-06-17T18:11:25.180

0

The maxlength attribute defines the maximum number of characters (as UTF-16 code units) the user can enter into an or .

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength

I created a simple example when the maximum number of words is 5:

const input = document.getElementById('textArea');
const textContent = [];
let maxWords = 5;

function separateWords(text, e){
 let words = text.split(" ");
  
 if (words.length >= maxWords + 1) {
   input.setAttribute('maxLength',words.join(" ").length - 1);
    return words.join(" ").trim();
  } else {
  return words.join(" ");
  }
};

input.addEventListener('input', function()
{
console.log(separateWords(input.value));
});

<div>
<p>
Type something (max 5 words):
</p>
<textarea id="textArea" value=""></textarea>
</div>

edited Jun 17 '20 at 18:11

answered Jun 16 '20 at 07:24

Lucas L.

407
3
9

Yes but my form prevents me from entering more than 50 words. Any solution? – Abraham Augustus Nortey Jun 16 '20 at 07:27
I am writing one possible solution for you, just a moment. – Lucas L. Jun 16 '20 at 07:31
@AbrahamAugustusNortey I edited my post with a simple example. Maybe this is not the most efficient way, but I think it can do the job. – Lucas L. Jun 16 '20 at 08:20
sorry for the late response, tried it today but some somehow does not work on my page , also causes some other fields on the form to stop working.. – Abraham Augustus Nortey Jun 17 '20 at 13:32
@AbrahamAugustusNortey For the issue related to other inputs being blocked, you can select the specific input by using .getElementById(). I edited my code so now only the element with id "textArea" will have this behavior. Now, do you have the repo link so I cant take a look? – Lucas L. Jun 17 '20 at 18:13
No please I don't, but will try it and let you know the outcome. Thank you – Abraham Augustus Nortey Jun 18 '20 at 12:26

How to limit my text area field to 1000 words in my html form

2 Answers2