使用 Javascript 将 Textarea 的 MaxLength 设置为 50 [重复]答案

【问题标题】：Set MaxLength of Textarea to 50 Using Javascript [duplicate]使用 Javascript 将 Textarea 的 MaxLength 设置为 50 [重复]
【发布时间】：2021-03-25 10:24:33
【问题描述】：

我正在尝试仅使用 javascript 将 textarea 字段的字符限制设置为 50 个字符。我不能直接编辑 textarea 字段的 HTML。

这是我尝试过的代码：

HTML

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

Javascript

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

这不起作用。任何帮助将不胜感激。

【问题讨论】：

如果我把你的代码放到一个 sn-p 中，它就可以工作。
不，因为它要求我能够添加 onkeypress="return enforceMaxLength(event, this, 110);"到我的 textarea 标签，这是我做不到的。该解决方案必须完全在 javascript 中完成，而无需直接编辑 textarea。如果这需要注入 onkeypress 事件，那就这样吧。
maxLength 应该是maxlength（小写）。也尝试使用 setAttribute('maxlength', "50");
@MohamedMufeed 在MDN 上对我来说看起来像maxLength，而且如前所述，它对我有用，如果是错字，情况就不会如此。
对不起，我把元素的属性和对象的属性弄错了。属性是什么：在小情况下。所以，.setAttribute('maxlength', '50') 应该没问题。

标签： javascript html squarespace

【解决方案1】：

在事件 onkeypress 时在 textarea 中添加函数。代码如下：

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>

代码更新！

【讨论】：

如果他们粘贴？
这不起作用。这是设置文本区域的地方。如果您访问 prosescrossingconfections.com/products/turtles，选择任何尺寸，选择任何选项，然后单击添加到购物车。弹出一个窗口，允许您添加消息。这是我试图限制字符的框。
@FeliciaSantos，代码已更新！
这类似于我作为第一条评论添加到问题中的副本中提供的解决方案。
这看起来很棒，但它不起作用。我想知道这是否与灯箱中的表单有关。

【解决方案2】：

你可以这样做：

<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>

通过检查 keyCode，您可以让所有其他编辑器键正常工作，例如 ins、delete、backspace、f5、...

如果你是动态添加 textarea 到页面，那么你应该在将 textarea 添加到 DOM 之后添加 eventListener，而不是 pageLoad 事件。

【讨论】：

嗯，它似乎没有用。这是设置的地方。如果你去pridescrossingconfections.com/products/turtles，选择任何尺寸，选择任何选项，然后点击添加到购物车。弹出一个窗口，允许您添加消息。这是我试图限制字符的框。
如果他们粘贴？
@FeliciaSantos id textarea 不同。我将更改我的代码以完成您的问题。
我知道。我只是在这里简写了 ID，所以它不是那么罗嗦。我更新了您的代码以反映实际 ID，但它仍然无法正常工作。
如果你是动态添加textarea，那么你应该在将textarea添加到DOM之后添加eventListener，而不是在pageLoad事件@FeliciaSantos

【解决方案3】：

这是因为属性maxLength 接收到的是Number 而不是String，这应该可以打勾：document.getElementById("textarea-yui3").maxLength = 50;

【讨论】：

这没用，很遗憾:(
我不明白为什么这篇文章会遭到反对。他的观点是正确的，不是吗？有人吗？
不，JavaScript 会自动将字符串强制转换为数字。