jQuery MAX-Char-Test (Version 1.0):
Was macht dieses jQuery-Plugin?Ähnlich wie bei Twitter, zählt dieses Plugin die eingegebenen Zeichen und zeigt an, wie viel Zeichen noch erlaubt sind. Hat man das Ende ( also 0 erreicht ) kann man nichts mehr eingeben.
Demo
Textarea ist mit den Standardoptionen eingestellt. Das Input-Feld hat eigene Optionen.
Textarea:
Test-Code den Ihr gerne modifizieren und verändern dürft
<?xml version="1.0" encoding="UTF-8" ?>
<!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>CharTest</title>
<style type="text/css" media="screen">
.counter{ color: #000; }
.warning{ color: #f00; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="Javascript" type="text/javascript">
//<![CDATA[
(function($) {
$.fn.maxChars = function(options){
// default config properties
var defaults = {
allowed: 140,
warning: 20,
counterCss: 'counter',
counterElement: 'div',
cssWarning: 'warning',
counterText: ''
};
var options = $.extend(defaults, options);
function countChars(obj){
var count = $(obj).val().length;
var available = options.allowed - count;
if( available <= options.warning )
$(obj).prev().addClass(options.cssWarning);
else
$(obj).prev().removeClass(options.cssWarning);
if( count >= options.allowed ){
var text = $(obj).val();
$(obj).val(text.substring(0, options.allowed));
}
if( available <= 0 )
$(obj).prev().html(options.counterText + '0');
else
$(obj).prev().html(options.counterText + available);
};
return this.each(function() {
$(this).before('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
countChars(this);
$(this).keyup(function(){countChars(this)});
$(this).change(function(){countChars(this)});
});
};
})(jQuery);
$(document).ready(function(){
//default usage
$("#textarea").maxChars();
//custom usage
$("#input").maxChars({
allowed: 50,
warning: 15,
counterText: 'to go: '
});
});
//]]>
</script>
</head>
<body>
<h1>Jquery MAX-Char-Test:</h1>
<p>Textarea:</p>
<form >
<textarea id="textarea" ></textarea>
<br/>
<input type="text" value="Text" id="input" />
</form>
</body>
</html>
Die Parameter
- allowed: 140, // die Maximale Zeichenanzahl
- warning: 20, // ab welcher Zeichenzahl soll sich die Schriftfarbe ändern
- counterCss: 'counter', // das CSS für den Counter und Countertext
- counterElement: 'div', // das HTML Element, das den Countertext enthält (div, span, p, ...)
- cssWarning: 'warning', // das CSS für den Counter, wenn warning-Zeichenanzahl erreicht wurde
- counterText: ' ' // der Text für den Counter
Dieses jQuery-Plugin ist eigentlich sehr simpel und man kann es hier und da noch verfeinern und tunen. Also wer noch schöne Ideen hat, der kann mir einen Kommentar da lassen.
