Question

我一直在努力为TEXTAREA字段添加一个字符计数器。有许多很多解决方案可以在线完成这项任务。

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

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

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

enter image description here

我的（不完整）解决方案
使用我通过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/

Answer 1

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

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

Answer 2

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

＆＃13;

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

＆＃13;

Textarea计数器/倒数与负数和执法

2 个答案: