Char counter

[fbian]

Някой може ли да ми даде jquery код,който брои оставащите символи,когато пишеш нещо в текстово поле и не ти позволява да пишеш,след като стигнеш максимума (char counter)?

 

[deam0n]

jquery.jqEasyCharCounter.min.js

[js]/* jQuery jqEasyCharCounter plugin
* Examples and documentation at: http://www.jqeasy.com/
* Version: 1.0 (05/07/2010)
* No license. Use it however you want. Just keep this notice included.
* Requires: jQuery v1.3+
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
(function($) {

$.fn.extend({
jqEasyCounter: function(givenOptions) {
return this.each(function() {
var $this = $(this),
options = $.extend({
maxChars: 100,
maxCharsWarning: 80,
msgFontSize: '12px',
msgFontColor: '#000000',
msgFontFamily: 'Arial',
msgTextAlign: 'right',
msgWarningColor: '#F00',
msgAppendMethod: 'insertAfter'
}, givenOptions);

if(options.maxChars <= 0) return;

// create counter element
var jqEasyCounterMsg = $("<div class=\"jqEasyCounterMsg\"> </div>");
var jqEasyCounterMsgStyle = {
'font-size' : options.msgFontSize,
'font-family' : options.msgFontFamily,
'color' : options.msgFontColor,
'text-align' : options.msgTextAlign,
'width' : $this.width(),
'opacity' : 0
};
jqEasyCounterMsg.css(jqEasyCounterMsgStyle);
// append counter element to DOM
jqEasyCounterMsg[options.msgAppendMethod]($this);

// bind events to this element
$this
.bind('keydown keyup keypress', doCount)
.bind('focus paste', function(){setTimeout(doCount, 10);})
.bind('blur', function(){jqEasyCounterMsg.stop().fadeTo( 'fast', 0);return false;});

function doCount(){
var val = $this.val(),
length = val.length

if(length >= options.maxChars) {
val = val.substring(0, options.maxChars);
};

if(length > options.maxChars){
// keep scroll bar position
var originalScrollTopPosition = $this.scrollTop();
$this.val(val.substring(0, options.maxChars));
$this.scrollTop(originalScrollTopPosition);
};

if(length >= options.maxCharsWarning){
jqEasyCounterMsg.css({"color" : options.msgWarningColor});
}else {
jqEasyCounterMsg.css({"color" : options.msgFontColor});
};

jqEasyCounterMsg.html('Characters: ' + $this.val().length + "/" + options.maxChars);
jqEasyCounterMsg.stop().fadeTo( 'fast', 1);
};
});
}
});

})(jQuery);[/js]



test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery jqEasyCounter Plugin - Simple Character Counter</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.jqEasyCharCounter.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#countable1').jqEasyCounter();
		
		$('.countable2').jqEasyCounter({
			'maxChars': 75,
			'maxCharsWarning': 70
		});
		
		$('#countable3').jqEasyCounter({
			'maxChars': 50,
			'maxCharsWarning': 40,
			'msgFontSize': '12px',
			'msgFontColor': '#000',
			'msgFontFamily': 'Verdana',
			'msgTextAlign': 'left',
			'msgWarningColor': '#F00',
			'msgAppendMethod': 'insertBefore'				
		});

		$('#testinput').jqEasyCounter({
			'maxChars': 10,
			'maxCharsWarning': 8
		});
});
</script>
</head>
<body>
    <h3>jqEasyCounter - Simple jQuery Character Counter Plugin</h3>
    id="countable1"<br />
    <textarea id="countable1" cols="30" rows="3"></textarea><br />
    class="countable2"<br />
    <textarea class="countable2" cols="30" rows="3"></textarea><br />
    class="countable2"<br />
    <textarea class="countable2" cols="30" rows="3"></textarea><br />
    class="countable3"<br />
    <textarea id="countable3" cols="30" rows="3"></textarea><br />
    <br />
    id="testinput"<br />
    <input id="testinput" type="text">
    <p><a href="http://www.jqeasy.com/jquery-character-counter/">« Back to article</a></p>
</body>
</html>

http://www.jqeasy.com/jquery-character-counter/