<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="http://prototypejs.org/assets/2008/1/25/prototype-1.6.0.2.js"></script> <script type="text/javascript"> document.observe('dom:loaded', function () { var elTextarea = $('textarea'); var elCountTarget = $$('.counttarget').first(); var maxLength = Number("50"); elCountTarget.innerHTML = Number(maxLength) + " "; elTextarea.observe('keyup', function () { if( elTextarea.value.length >= maxLength ) { elTextarea.value = elTextarea.value.substring(0,maxLength); elCountTarget.innerHTML = "0"; } else { elCountTarget.innerHTML = Number( maxLength-elTextarea.value.length ) +" "; } }) if( elTextarea.value.length >= maxLength ) { elTextarea.value = elTextarea.value.substring(0,maxLength); elCountTarget.innerHTML = "0"; } else { elCountTarget.innerHTML = Number( maxLength-elTextarea.value.length ) +" "; } }); </script> </head> <body> <textarea rows="10" id="textarea" name="text" cols="60"></textarea> <br />noch <span class="counttarget"></span> Zeichen übrig! </body> </html>
Sie können den Quelltext auch verändern und durch Klick auf den Knopf sehen Sie dann gleich die Änderungen.
