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.
Keine Kommentare:
Kommentar veröffentlichen