0

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

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

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

Twitter 解决方案
我认为 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/

4

2 回答 2

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>

于 2015-04-11T21:32:13.413 回答
1

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

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

于 2015-04-11T20:58:13.390 回答