使用 Javascript 将 Textarea 的 MaxLength 设置为 50 [重复]
Posted
技术标签:
【中文标题】使用 Javascript 将 Textarea 的 MaxLength 设置为 50 [重复]【英文标题】：Set MaxLength of Textarea to 50 Using Javascript [duplicate] 【发布时间】：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') 应该没问题。
【参考方案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 会自动将字符串强制转换为数字。以上是关于使用 Javascript 将 Textarea 的 MaxLength 设置为 50 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 JavaScript 将文本插入 textarea 而不弄乱编辑历史？
使用 javascript 将文本插入 textarea 以用于 google chrome 扩展
如何仅使用 css 不使用 javascript 将 <textarea> 高度自动调整为内部文本的高度？
手动写入后无法使用 javascript 更新 textarea