如何防止用户在达到最大字符限制后在textarea中输入文本
我想阻止用户在达到最大字符限制时在textarea中输入文本。 发生了什么，当我达到最大限制然后我的文本区域滚动条移动到顶部我以某种方式阻止这个代码。
jQuery(document).ready(function($) { $('textarea.max').keyup(function() { var $textarea = $(this); var max = 400; if ($textarea.val().length > max) { var top = $textarea.scrollTop(); $textarea.val($textarea.val().substr(0, max)); $textarea.scrollTop(top); } }); }); //end if ready(fn) 但我也希望在达到最大限制后用户无法在textarea中输入任何内容。 目前发生的情况是，如果用户按下并按住键，达到最大限制后，字符在文本区域中键入，尽管在释放按钮后它返回到原始文本（即$ textarea.val（$ textarea.val（））。 substr（0，max））;）。 但是，一旦这种情况变为现实，我希望这样
if ($textarea.val().length > max) {
用户无法输入任何内容。 我希望光标从textarea中消失。 但是如果用户删除了一些文本，那么光标也可供用户再次输入输入。 我该怎么做？
在发生默认行为（填充文本区域）后，将触发keyup事件。
最好使用keypress事件，并过滤不可打印的字符。
演示： http ： //jsfiddle.net/3uhNP/1/ （最大长度为4）
jQuery(document).ready(function($) { var max = 400; $('textarea.max').keypress(function(e) { if (e.which < 0x20) { // e.which < 0x20, then it's not a printable character // e.which === 0 - Not a character return; // Do nothing } if (this.value.length == max) { e.preventDefault(); } else if (this.value.length > max) { // Maximum exceeded this.value = this.value.substring(0, max); } }); }); //end if ready(fn)
使用上面的代码来限制插入文本区域的字符数，如果要禁用textarea本身（即，之后将无法编辑），可以使用javascript / jquery来禁用它。
把事情简单化
var max = 50; $("#textarea").keyup(function(e){ $("#count").text("Characters left: " + (max - $(this).val().length)); });
并在您的HTML中添加此项
查看示例
只需在Javascript文件中编写此代码即可。但需要使用textarea指定’maxlength’属性。 这适用于页面的所有文本区域。
$('textarea').bind("change keyup input",function() { var limitNum=$(this).attr("maxlength"); if ($(this).val().length > limitNum) { $(this).val($(this).val().substring(0, limitNum)); } });
您可以按原样保留活动，只需使用此库即可
例子
// applying a click event to one element Touche(document.querySelector('#myButton')).on('click', handleClick); // or to multiple at once Touche(document.querySelectorAll('.myButtons')).on('click', handleClicks); // or with jQuery $('.myButtons').on('click', handleClicks);
你可以直接给textarea maxlength来禁用它自己。 但是，您希望显示相应的消息，然后使用keyup事件进行默认行为和textarea length来计算字符并显示合适的消息。
HTML
jQuery的
$(function(){ var max = parseInt($("#tarea").attr("maxlength")); $("#count").text("Characters left: " + max); $("#tarea").keyup(function(e){ $("#count").text("Characters left: " + (max - $(this).val().length)); if($(this).val().length==max) $("#msg").text("Limit Reached...."); else $("#msg").text(""); }); });
演示小提琴
对于那些已在您的浏览器中使用ES2015的用户，这里是使用上述一些答案的实现：
class InputCharacterCount { constructor(element, min, max) { this.element = element; this.min = min; this.max = max; this.appendCharacterCount(); } appendCharacterCount(){ let charCount = ``; this.element.closest('.form-group').append(charCount); } count(event){ this.element.attr('maxlength', this.max); // Add maxlenght attr to input element let value = this.element.val(); this.element .closest('.form-group') .find('.char-counter') .html(value.length+'/'+this.max); // Add a character count on keyup/keypress if (value.length < this.min || value.length > this.max) { // color text on min/max changes this.element.addClass('text-danger'); } else { this.element.removeClass('text-danger'); } } }
用法：
let comment = $('[name="collection-state-comment"]'); let counter = new InputCharacterCount(comment, 21, 140); $(comment).keyup(function(event){ counter.count(event); });
您可以使用此插件而不是尝试编写自己的插件。 我发现它运作得很好。