带有负数和强制执行的 Textarea 计数器/倒计时答案

【问题标题】：Textarea counter / countdown with negative numbers and enforcement带有负数和强制执行的 Textarea 计数器/倒计时
【发布时间】：2015-04-11 20:43:01
【问题描述】：

我一直致力于将字符计数器添加到 TEXTAREA 字段。有很多很多在线可用的解决方案来完成这项任务。

“零停”解决方案
我遇到的问题是，几乎所有解决方案都在 0 处终止用户输入。我猜这是有效的，但在用户友好性方面并不是最佳的。例如，如果用户将文本粘贴到 TEXTAREA 中，并且文本超出了字段的限制，则此停在零处的解决方案将突然截断多余的文本。然后，用户必须努力找到丢失的内容，然后编辑他们的消息、提交第二个表单或其他一些负担。

“负字符数”解决方案
其他解决方案允许用户输入他们想要的所有内容。字符计数器将从正数变为负数。这些计数器的问题是缺乏强制执行：它们允许用户提交表单，即使字符数为负数。

Twitter 解决方案
我认为推特是对的。他们让用户输入他们想要的所有内容，并使用负字符数（以及我不需要的彩色背景）突出显示多余的文本。他们在计数为负数时禁用提交按钮。

我的（不完整的）解决方案
使用我通过 Google 找到的第三方代码，我设计了一个字符计数器，它在计数方面非常有效。但是对 JS 有点陌生，我无法编写强制部分的代码。

这是我的问题：
当计数器为负数时，如何获取防止提交表单的代码？

HTML

<form action="" method="post">

<div>
<textarea name="comments" id="comments" cols="50" rows="10"></textarea>
</div>

<div>
<input type="submit">
</div>

</form>

CSS

form div {
    position: relative;
}

form .counter {
    position: absolute;
    left: 300px;
    bottom: -25px;
    font-size: 25px;
    font-weight: bold;
    color: #ccc;
    }

form .warning {color: orange;}

form .exceeded {color: red;}

JavaScript

<script src="/js/jquery.js"></script>

<script>

(function($) {

    $.fn.charCount = function(options){

        // default configuration properties
        var defaults = {    
            allowed: 100,       
            warning: 25,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: ''
        }; 

        var options = $.extend(defaults, options); 

        function calculate(obj){
            var count = $(obj).val().length;
            var available = options.allowed - count;
            if(available <= options.warning && available >= 0){
                $(obj).next().addClass(options.cssWarning);
            } else {
                $(obj).next().removeClass(options.cssWarning);
            }
            if(available < 0){
                $(obj).next().addClass(options.cssExceeded);
            } else {
                $(obj).next().removeClass(options.cssExceeded);
            }
            $(obj).next().html(options.counterText + available);
        };

        this.each(function() {              
            $(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
            calculate(this);
            $(this).keyup(function(){calculate(this)});
            $(this).change(function(){calculate(this)});
        });

    };

})(jQuery);

</script>

<script>
    $(document).ready(function(){   
        $("#comments").charCount();
    });
</script>

https://jsfiddle.net/nyc212/sk5kfopw/

【问题讨论】：

标签： javascript html forms textarea charactercount

【解决方案1】：

我已经修改了您的插件，将提交按钮作为第一个参数。如果你想让它更有活力：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title></title>
	<style>
		form div {
			position: relative;
		}

		form .counter {
			position: absolute;
			left: 300px;
			bottom: -25px;
			font-size: 25px;
			font-weight: bold;
			color: #ccc;
		}

		form .warning {
			color: orange;
		}

		form .exceeded {
			color: red;
		}
	</style>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
		(function($) {

			$.fn.charCount = function(btnsub, options){
	  
				this.btnsub = btnsub;
        
				// default configuration properties
				var defaults = {	
					allowed: 100,		
					warning: 25,
					css: 'counter',
					counterElement: 'span',
					cssWarning: 'warning',
					cssExceeded: 'exceeded',
					counterText: ''
				}; 
			
				var options = $.extend(defaults, options); 
		
				function calculate(obj,btnsub){
				
					btnsub.attr("disabled", "disabled");

					var count = $(obj).val().length;
					var available = options.allowed - count;
					if(available <= options.warning && available >= 0){
						$(obj).next().addClass(options.cssWarning);
					} else {
						$(obj).next().removeClass(options.cssWarning);
					}
					if(available < 0){
						$(obj).next().addClass(options.cssExceeded);
					} else {
						$(obj).next().removeClass(options.cssExceeded);
						btnsub.removeAttr("disabled");
					}
					
					$(obj).next().html(options.counterText + available);
				};
				
				this.each(function() {  			
					$(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
					
					calculate(this, btnsub);

					$(this).keyup(function(){calculate(this,btnsub)});
					$(this).change(function(){calculate(this,btnsub)});
				});
	  
			};

		})(jQuery);

		$(document).ready(function(){	
			$("#comments").charCount($("#btnsub"));
		});

	</script>
</head>
<body>
	<form method="post">

		<div>
			<textarea name="comments" id="comments" cols="50" rows="10"></textarea>
		</div>

		<div>
			<input type="submit" id="btnsub">
		</div>

	</form>
</body>
</html>

【讨论】：

【解决方案2】：

我会尝试使用disabled 属性禁用提交按钮，或者使用e.preventDefault 阻止表单提交。我更新了你的小提琴......只需取消注释任何一个选项

https://jsfiddle.net/sk5kfopw/1/

【讨论】：

感谢您的回复。我发现禁用选项的一个故障是，一旦删除了多余的字符并且字符计数器回到正值区域，提交按钮仍然处于禁用状态。
@mbnyc 啊，对，对不起。如果字符数回落到可接受的范围内，您将不得不删除 disabled 属性一次。这是更新的小提琴：jsfiddle.net/sk5kfopw/3