Hauptmenü
Achtung: Ohne Aktivierung JavaScript sind die folgenden Code nicht ausführbar.
Standardeinstellung in den Browsern ist aktiv.
IE = Internet Explorer
M = Mozilla Firefox
O = Opera
S = Safari
G = Google Crome
K = Konqueror*
Alle JavaScripte und CSS-
* Ein Kompatibilitätstest zu dem Browser Konqueror (Linux) ist leider nicht möglich, wegen fehlender Hard-
Entsprechende Hinweise zu den genannten Browsern werden gerne entgegen genommen.
Viele JavaScripte die mit dem Internet Explorer und Mozilla Firefox laufen, gehen auch mit Safari und Google Chrome.
Inzwischen gibt es ein dutzend verschiedene Browser und ebenso viele Browserversionen. Eine Anpassung der Homepage an alle Browser ist daher unmöglich.
Text markieren [IE|M|O]
Mit einem Klick den Text im Textfeld markieren.
<form name="formel">
<textarea rows=5 cols=40 name="eins">
Mit einem Klick auf den Button diesen Text "Markieren" und in die Zwischenablage kopieren...
</textarea>
<input type=button value="Markieren" onClick="this.form.eins.select();this.form.eins.focus();">
</form>
Text markieren und in die Zwischenablage kopieren [IE|G]
<form name="eins">
<textarea rows=5 cols=40 name="eins">
Mit einem Klick auf den Button diesen Text "Markieren"...
</textarea>
<input type=button value="Markieren & Kopieren"
onClick="this.form.eins.select();this.form.eins.focus(); document.execCommand('Copy')">
</form>
Zwischenablage auslesen [IE]
<form name="eins">
<textarea rows=5 cols=40 name="eins"></textarea>
<input type=button value="Zwischenablage Auslesen"
onClick="this.form.eins.focus();document.execCommand('Paste')">
</form>
Eingabe prüfen [IE|M|O]
<script type="text/javascript">
function check() {
if (document.formel2.eingabefeld.value=='Eingabe hier:....') {
alert('Bitte gebe doch etwas ein!');
}
else {
alert('Deine Eingabe: ' + document.formel2.eingabefeld.value + "!");
}
}
</script>
<form name="formel2">
<input type=text size=40 name="eingabefeld" value="Eingabe hier:....">
<input type=button value="fertig" onClick="check()">
</form>
Eingabefeld fokussieren [IE|M|O]
Beim Laden der Seite wird das Eingabefeld fokussiert.
<body onLoad="document.Feld.Eingabe.focus()">
<form name="Feld">
<input type="text" name="Eingabe">
</form>
Automatische Eingabe-
Der eingegebene Wert wird direkt nach dem Tastendruck überprüft. Liegt der eingegebene Wert in diesem Beispiel unter 101, wird er akzeptiert. Ist der Wert über 100 wird die Eingabe korrigiert.
<script type="text/javascript">
function Check() {
if (document.Formel.Eingabe.value >= 101) {
document.Formel.Eingabe.value = 100;
}
}
</script>
<form name="Formel">
<input type="text" name="Eingabe" onKeyup="Check()">
</form>
Mit JavaScript Text umwandeln [IE|M|O]
Text in Großbuchstaben oder Kleinbuchstaben umwandeln.
<script type="text/javascript">
function Kleinbuchstaben() {
var a = document.gG.Big.value;
a = a.toLowerCase();
document.gG.Big.value = a;
}
function Großbuchstaben() {
var a = document.gG.Big.value;
a = a.toUpperCase();
document.gG.Big.value = a;
}
</script>
<form name="gG">
<input type=text name="Big" size=50 value="DAs iSt EIN teXT alS BeiSpIEl Zum TesTEN"><br>
<input type=button value="Großbuchstaben" onClick="Großbuchstaben()">
<input type=reset value="Reset">
<input type=button value="Kleinbuchstaben" onClick="Kleinbuchstaben()">
</form>
Eingabefeld automatisch ändern [IE|M|O]
Das Eingabefeld ändert bei „onFocus“ (Event-
<input type="text" value="Deinen Namen"
onFocus="if(this.value=='Deinen Namen'){
this.value='';
this.style.color='#FF0000'}"
style="color: #B0B0B0;">
Textfeld automatisch ändern [IE|M|O]
Das Textfeld ändert bei „onFocus“ (Event-
<textarea rows="3" cols="40"
onFocus="if(this.value=='Kommentar eingeben'){
this.value='';
this.style.color='#69ff01'}"
style="color: #d2e7c5;">Kommentar eingeben
</textarea>
Hintergrundfarbe ein-
Die Hintergrundfarbe kann über eine Checkbox verändert werden.
<form name="Form15">
Hintergrund-
<input type=checkbox name="ok" onClick="
if (document.Form15.ok.checked) {
document.getElementById('Farbe').style.backgroundColor = '#FFFFCA';
}
else {
document.getElementById('Farbe').style.backgroundColor = '#FFFFFF';
}">
<textarea rows="3" cols="40" id="Farbe">
</textarea>
</form>
Tasteneingaben Zählen [IE|M|O]
Bei manchen Formularen ist es wichtig die Textlänge zu begrenzen. Sie haben noch: Zeichen
<script type="text/javascript">
function CheckLen(Target) {
var StrLen = Target.value.length
if (StrLen == 1 && Target.value.substring(0,1) == " ") {
Target.value = ""; StrLen = 0;
}
if (StrLen > 130 ) {
Target.value = Target.value.substring(0,130);
var CharsLeft = 0;
}
else {
var CharsLeft = 130 -
}
document.Form.Anzahl.value = CharsLeft;
}
</script>
<Form name="Form">
Sie haben noch:
<input type="text" name="Anzahl" size="3" maxlength="3" readonly>
Zeichen<br>
<textarea rows="5"
cols="40" onChange="CheckLen(this)"
onFocus="CheckLen(this)" onKeyDown="CheckLen(this)"
onKeyUp="CheckLen(this)" >
</textarea>
</form>
Text bei Mouseover ändern [IE|M|O]
Text beim überfahren mit der Maus ändern lassen.
<span
onMouseOver="this.innerHTML='Dieser Text hat sich beim überfahren mit der Maus geändert.'"
onMouseOut="this.innerHTML='Dieser Text ändert sich beim überfahren mit der Maus.'">
Dieser Text ändert sich beim überfahren mit der Maus.
</span>
Großbuchstaben Test [IE|M|O]
Das JavaScript ermittelt wie viele Großbuchstaben im Text vorhanden sind.
<script type="text/javascript">
function test() {
var Feld = new Array("A","B","C","D","E","F","G","H","I","J","K","L",
"M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");
var test = document.Form14.Eingabe.value;
var wert = 0;
for (var i = 0; i < test.length; i++) {
for (var r = 0; r < Feld.length; r++) {
if ( test.substr(i,1) == Feld[r]) {
wert++;
}
}
}
alert("Dieser Text enthält " + wert + " große Buchstaben.");
}
</script>
<form name=Form14>
<textarea rows="5" cols="40" name="Eingabe">
Viele JavaScripte die mit dem Internet Explorer und Mozilla Firefox laufen, gehen auch mit Safari und Google Chrome.Inzwischen gibt es ein dutzend verschiedene Browser und ebenso viele Browserversionen. Eine Anpassung der Homepage an alle Browser ist daher unmöglich.
</textarea>
<input type="button" value=" Zählen " onClick="test();">
</form>