Quelltext der Datei: http://www.michaelster.ch/jsTestFolder/form_input_limitieren_mit_js.htm

Dateigrösse: 3.22 kb

[Anzeige ohne Zeilennummern]

1 
<!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" xml:lang="de" lang="de">
<head>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        
    <title>prototype :: textarea-counter</title>
    
<style type="text/css">
body    { font-family:verdana,arial,sans-serif; font-size:12px; margin:2em; }
a        { font-weight:bold; color:#444; padding:2px 5px; text-decoration:none; }
a:hover { color:#fff; background-color:#444; }
span.result    { float:left; padding:5px; border:2pt dotted green; background-color:#f3f3f3; color:green; font-weight:bold; }
input    { margin:5pt 0pt; }
input,textarea    { font-family:verdana,arial,sans-serif; font-size:12px; }
</style>

<script type="text/javascript" src="../prototype/lib/prototype.js"></script>

<script type="text/javascript">
//<![CDATA[
function start(){
    berechneZeichen($("txt"));
    Field.focus("txt");
}
window.onload=start;

function berechneZeichen() {
    var maxLaenge = 30;
    if ($F("txt").length > maxLaenge) {
      $("txt").value = $F("txt").substring(0, maxLaenge);
      restlicheZeichen = 0 + "<font color='red'> -> 30 chars filled up </font>";
    }
    else {
      restlicheZeichen = maxLaenge - $F("txt").length;
    }
    $("anzeige").innerHTML = "Verbleibende Zeichen: " + restlicheZeichen;
    
    var msg = "<input type='text' size='10'><br />";
    var total = '';
    for(var i=0; i<2; i++)
    {
        total += msg;
    }
    $("test").innerHTML=total;
}

function inputs(anz) {
    var msg2 = "<input type='text' size='25' name='anhang[]' /><br />";
    var total2 = '';
    for(var i=0; i<anz; i++)
    {
        total2 += msg2;
    }
    $("test2").innerHTML=total2;
    $("test3").style.display="block";
    $("test4").style.display="block";
}

function showAnhang(t) {
    ergebnis='';
    for(j=0; j<t.length; j++) {
        //alert(t[j].value);
        ergebnis += t[j].value + ' ';
    }
    $("test4").innerHTML=ergebnis;
    return false;
}
//]]>
</script>
</head>

<body>

<p><a href="#" onclick="inputs(4);">&curren; 4 neue input-Felder anlegen</a></p>

<p style="clear:left; border-top:1pt dotted green; margin-bottom:1px;">&nbsp;</p>

<form name="eingabeFormular">
<b>Texteingabe (maximal 30 Zeichen):</b>
<br />
<textarea name="txt" id="txt" rows="3" cols="45" wrap="virtual" onchange="berechneZeichen(this)" onfocus="berechneZeichen(this)" onkeydown="berechneZeichen(this)" onkeyup="berechneZeichen(this)"></textarea>
<b><div id="anzeige"></div></b>
<div id="test" style="float:left; margin:20px 20px 0px 0px;"></div>
</form>


<form method="post" action="form_input_limitieren_mit_js.htm" enctype="multipart/form-data" name="mimemail">
<div id="test2" style="float:left; margin:20px 20px 0px 0px;"></div>
<div id="test3" style="float:left; margin:20px 20px 0px 0px; display:none;">
<input type="button" value="senden" onclick="showAnhang(this.form.elements['anhang[]']);" />
</div>
</form>

<p style="clear:left; border-bottom:1pt dotted green; margin-bottom:20px;">&nbsp;</p>

<span id="test4" class="result" style="display:none;">Resultat:</span>

<br />
<br />

</body>
</html>