0

TEXTAREA フィールドに文字カウンターを追加する作業を行っています。このタスクには、オンラインで利用できる非常に多くのソリューションがあります。

「ストップ アット ゼロ」ソリューション
私が抱えている問題は、事実上すべてのソリューションがユーザー入力を 0 で終了させることです。これは効果的だと思いますが、使いやすさの点では最適ではありません。たとえば、ユーザーがテキストを TEXTAREA に貼り付け、テキストがフィールドの制限を超えた場合、このゼロで停止するソリューションは、余分なテキストを突然切り捨てます。ユーザーは、不足しているコンテンツを見つけてから、メッセージを編集したり、2 番目のフォームを送信したり、その他の負担を負う必要があります。

「負の文字数」ソリューション
他のソリューションでは、ユーザーが必要なすべてを入力できます。文字カウンターは正から負になります。これらのカウンターの問題は、強制力がないことです。ユーザーは、負の文字数でもフォームを送信できます。

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

disabled属性を使用して送信ボタンを無効にするか、 を使用してフォームが送信されないようにしe.preventDefaultます。私はあなたのフィドルを更新しました...どちらかのオプションのコメントを外してください

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

于 2015-04-11T20:58:13.390 に答える
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 に答える