个人中心
gpt4 book ai didi

javascript - 带负数的文本区域计数器/倒计时和强制执行

转载 作者：行者123 更新时间：2023-12-02 16:16:03 24 4
gpt4 key购买 nike

我一直致力于向 TEXTAREA 字段添加字符计数器。对于此任务，网上有很多很多解决方案。

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

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

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/

最佳答案

我已经修改了您的插件，以将提交按钮作为第一个参数。如果您希望它更加动态:

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

关于javascript - 带负数的文本区域计数器/倒计时和强制执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29582824/

24 4 0
文章推荐： javascript - 用 Alpha 颜色覆盖 Canvas 图像的一部分
文章推荐： javascript - $Resource 错误 - 使用 $save.success 回调但数据保存正常时
文章推荐： Javascript 在页面加载后运行
文章推荐： javascript - 用 JavaScript 正则表达式替换字符
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com