Set MaxLength of Textarea to 50 Using Javascript

Question

I'm trying to set the character limit of a textarea field to 50 characters using only javascript. I CANNOT directly edit the HTML of the textarea field.

Here is the code I've attempted:

HTML

<textarea class="field-element " id="textarea-yui3" spellcheck="false"></textarea>

Javascript

<script>
document.getElementById("textarea-yui3").maxLength = "50";
</script>

This is not working. Any assistance would be appreciated.

No, because it requires that I'm able to add onkeypress="return imposeMaxLength(event, this, 110);" to my textarea tag, which I'm not able to do. The solution has to be entirely done in javascript without editing the textarea directly. If that requires injecting the onkeypress event then so be it. — Felicia Santos, Dec 14 '20 at 19:00
`maxLength` should be `maxlength` (small case). also try using setAttribute('maxlength', "50"); — Mohamed Mufeed, Dec 14 '20 at 19:07
@MohamedMufeed Looks like `maxLength` to me on the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement), plus as already mentioned, it works for me, which wouldn't be the case, if it was a typo. — ASDFGerte, Dec 14 '20 at 19:08
Ah sorry, I mistaken the element’s attribute with the object’s property. The attribute is what: in small case. so, `.setAttribute('maxlength', '50')` whould have been fine. — Mohamed Mufeed, Dec 14 '20 at 19:30

Renato Sant'Anna · Answer 1 · 2020-12-14T20:07:59.317

Add function in textarea on event onkeypress. Code as follow:

let textarea = document.querySelector("form div.form-item textarea.field-element");
textarea.maxLength = "50";
textarea.onkeypress = function(e) {
   if (e.keyCode == 8) { return true; }
   return this.value.length < this.maxLength;
};

<html>
<body>
    <form data-form-id="5d276a629196ad00019f6f19" data-success-redirect="" autocomplete="on" id="yui_3_17_2_1_1607975626173_414">      
        <div class="field-list clear" id="yui_3_17_2_1_1607975626173_413">
              <div id="textarea-yui_3_17_2_1_1562863586015_217028" class="form-item field textarea">                
            <label class="title" for="textarea-yui_3_17_2_1_1562863586015_217028-field">
              Enclosure card message or Coments              
            </label>
                <textarea class="field-element " id="textarea-yui_3_17_2_1_1562863586015_217028-field"></textarea>
              </div>
            <div id="select-yui_3_17_2_1_1562863586015_217961" class="form-item field select">                
            <label class="title" for="select-yui_3_17_2_1_1562863586015_217961-field">
              Gift wrap              
            </label>
                <select id="select-yui_3_17_2_1_1562863586015_217961-field" name="select-yui_3_17_2_1_1562863586015_217961-field">                  
                    <option value="General">General</option>                  
                    <option value="Female gift">Female gift</option>                  
                    <option value="Male gift">Male gift</option>                  
                    <option value="Holiday / Seasonal">Holiday / Seasonal</option>                  
                </select>
              </div>
        </div>
      <div data-animation-role="button" class="form-button-wrapper">
        <input class="button sqs-system-button sqs-editable-button" type="submit" value="Add To Cart">
      </div>      
      <div class="hidden form-submission-text"></div>
      <div class="hidden form-submission-html" data-submission-html=""></div>
    </form>
</body>
</html>

Code updated!

This did not work. This is where the textarea is setup. If you go to pridescrossingconfections.com/products/turtles , select any size, select any choice, and then click add to cart. A window pops up that allows you to add a message. This is the box I'm trying to limit the characters of. — Felicia Santos, Dec 14 '20 at 19:49
This is similar to the solutions presented on the duplicate I added to the question as the first comment. — Heretic Monkey, Dec 14 '20 at 20:10
This looks great, but it isn't working. I wonder if it has to do with the form being in a lightbox. — Felicia Santos, Dec 14 '20 at 20:17
@HereticMonkey I tried that solution before asking this question but it did not work for me. — Felicia Santos, Dec 14 '20 at 20:18
@FeliciaSantos, Even with the updated code was not it? What framework are you using? — Renato Sant'Anna, Dec 14 '20 at 20:20
@FeliciaSantos "That solution" There are 15 answers on the question. If there are other extenuating circumstances not in your question, please ask another question with all information needed. — Heretic Monkey, Dec 14 '20 at 20:23
@RenatoSant'Anna Yes, I used your updated code. This is a Squarespace site. — Felicia Santos, Dec 14 '20 at 21:58

Vahid · Answer 2 · 2020-12-14T20:27:45.973

0

You can do something like this:

<script>
    window.addEventListener("load", event => {
        document.getElementById('textarea-yui3').addEventListener("keydown", function (event) {
            let texLen = document.getElementById('textarea-yui3').value.length;
            let kc = event.keyCode;
            if (texLen >= 50 && (kc === 32 || (kc >= 48 && kc <= 57) || (kc >= 65 && kc <= 90)))
                event.preventDefault();
        });
    });
</script>

By checking keyCode, you could let all other editor keys work fine, such as ins, delete, backspace, f5, ...

If you are adding textarea dynamicallyto the page, then you should add eventListener after adding textarea to DOM, not on pageLoad event.

edited Dec 14 '20 at 20:27

answered Dec 14 '20 at 19:30

Vahid

655
4
11

Hmm it didn't seem to work. This is where it is setup. If you go to https://www.pridescrossingconfections.com/products/turtles , select any size, select any choice, and then click add to cart. A window pops up that allows you to add a message. This is the box I'm trying to limit the characters of. – Felicia Santos Dec 14 '20 at 19:48
And if they paste? – epascarello Dec 14 '20 at 19:49
@FeliciaSantos the id textarea is different. I will change my code to complete your problem. – Renato Sant'Anna Dec 14 '20 at 19:58
I know. I just shorthanded the ID here so it wasn't so wordy. I updated your code to reflect the actual ID and it still didn't work. – Felicia Santos Dec 14 '20 at 20:13
if you are adding textarea dynamically, then you should addeventListener after adding textarea to DOM, not on pageLoad event @FeliciaSantos – Vahid Dec 14 '20 at 20:23
@FeliciaSantos, I will update code for id in element. – Renato Sant'Anna Dec 14 '20 at 20:25

score -2 · Answer 3 · answered Dec 14 '20 at 18:56

-2

It's because the property maxLength receives a Number not a String, this should do the tick: document.getElementById("textarea-yui3").maxLength = 50;

answered Dec 14 '20 at 18:56

Gustavo Freire

105
8

This didn't work, unfortunately :( – Felicia Santos Dec 14 '20 at 19:06
1

No, JavaScript will automatically coerce the string to a number. – Heretic Monkey Dec 14 '20 at 20:06

Set MaxLength of Textarea to 50 Using Javascript

HTML

Javascript

3 Answers3