form_input_limitieren_mit_js.htm

Dateigrösse: 3.22 kb

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  4 <head>
  5 
  6     <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  7         
  8     <title>prototype :: textarea-counter</title>
  9     
 10 <style type="text/css">
 11 body    { font-family:verdana,arial,sans-serif; font-size:12px; margin:2em; }
 12 a        { font-weight:bold; color:#444; padding:2px 5px; text-decoration:none; }
 13 a:hover { color:#fff; background-color:#444; }
 14 span.result    { float:left; padding:5px; border:2pt dotted green; background-color:#f3f3f3; color:green; font-weight:bold; }
 15 input    { margin:5pt 0pt; }
 16 input,textarea    { font-family:verdana,arial,sans-serif; font-size:12px; }
 17 </style>
 18 
 19 <script type="text/javascript" src="../prototype/lib/prototype.js"></script>
 20 
 21 <script type="text/javascript">
 22 //<![CDATA[
 23 function start(){
 24     berechneZeichen($("txt"));
 25     Field.focus("txt");
 26 }
 27 window.onload=start;
 28 
 29 function berechneZeichen() {
 30     var maxLaenge = 30;
 31     if ($F("txt").length > maxLaenge) {
 32       $("txt").value = $F("txt").substring(0, maxLaenge);
 33       restlicheZeichen = 0 + "<font color='red'> -> 30 chars filled up </font>";
 34     }
 35     else {
 36       restlicheZeichen = maxLaenge - $F("txt").length;
 37     }
 38     $("anzeige").innerHTML = "Verbleibende Zeichen: " + restlicheZeichen;
 39     
 40     var msg = "<input type='text' size='10'><br />";
 41     var total = '';
 42     for(var i=0; i<2; i++)
 43     {
 44         total += msg;
 45     }
 46     $("test").innerHTML=total;
 47 }
 48 
 49 function inputs(anz) {
 50     var msg2 = "<input type='text' size='25' name='anhang[]' /><br />";
 51     var total2 = '';
 52     for(var i=0; i<anz; i++)
 53     {
 54         total2 += msg2;
 55     }
 56     $("test2").innerHTML=total2;
 57     $("test3").style.display="block";
 58     $("test4").style.display="block";
 59 }
 60 
 61 function showAnhang(t) {
 62     ergebnis='';
 63     for(j=0; j<t.length; j++) {
 64         //alert(t[j].value);
 65         ergebnis += t[j].value + ' ';
 66     }
 67     $("test4").innerHTML=ergebnis;
 68     return false;
 69 }
 70 //]]>
 71 </script>
 72 </head>
 73 
 74 <body>
 75 
 76 <p><a href="#" onclick="inputs(4);">&curren; 4 neue input-Felder anlegen</a></p>
 77 
 78 <p style="clear:left; border-top:1pt dotted green; margin-bottom:1px;">&nbsp;</p>
 79 
 80 <form name="eingabeFormular">
 81 <b>Texteingabe (maximal 30 Zeichen):</b>
 82 <br />
 83 <textarea name="txt" id="txt" rows="3" cols="45" wrap="virtual" onchange="berechneZeichen(this)" onfocus="berechneZeichen(this)" onkeydown="berechneZeichen(this)" onkeyup="berechneZeichen(this)"></textarea>
 84 <b><div id="anzeige"></div></b>
 85 <div id="test" style="float:left; margin:20px 20px 0px 0px;"></div>
 86 </form>
 87 
 88 
 89 <form method="post" action="form_input_limitieren_mit_js.htm" enctype="multipart/form-data" name="mimemail">
 90 <div id="test2" style="float:left; margin:20px 20px 0px 0px;"></div>
 91 <div id="test3" style="float:left; margin:20px 20px 0px 0px; display:none;">
 92 <input type="button" value="senden" onclick="showAnhang(this.form.elements['anhang[]']);" />
 93 </div>
 94 </form>
 95 
 96 <p style="clear:left; border-bottom:1pt dotted green; margin-bottom:20px;">&nbsp;</p>
 97 
 98 <span id="test4" class="result" style="display:none;">Resultat:</span>
 99 
100 <br />
101 <br />
102 
103 </body>
104 </html>
105