JavaScript Textarea
Scripte > Snipped
Textboxen und Textfelder mit JavaScript
Javascript-Textareas sind frei verfügbare Elemente, die leer zur Verfügung stehen oder bereits einen Text enthalten können. Diese finden meist in Formularen, Abfragen, Hinweisen etc. Anwendung und können beliebig kombiniert werden, z. B mit Checkboxen oder Button. Der Vorteil besteht darin, dass diese verhältnismäßig einfach strukturiert sind und meist identische Funktionen aufweisen.
Es sind nur Beispiele, da diese nur zur Erweiterung in kompletten Funktions-Skripten zur Anwendung kommen sollen. Die Funktionsaufrufe sind meist ähnlich, so dass die Skripte mit- bzw. untereinader kombiniert werden können.
HTML-Code einfach nur kopieren und an vorgesehener Stelle im Body-Bereich <body>....</body> einfügen und Textelemente anpassen.
Die hier gezeigten Elemente sind Standard formatiert und können der Homepage angepasst werden:
Code für den <HEAD> Bereich
<style>
.js-area { border: 1px solid #000; border-radius: 5px; padding: 5px; }.js-button { font-family: tahoma, arial; font-size: 12px; font-weight: normal;background-color: #e1e1e1; border: 1px solid #000; border-radius: 5px;padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; }
</style>
Text markieren:
Code für den <BODY> Bereich
<form>
<textarea class="js-area" rows="6" cols="35" name="mark">
Mit einem Klick auf den Button, diesen Text "Markieren". Dieser Text wurde automatisch eingefügt. Man kann ihn aber auch bearbeiten oder das Textfeld unbelegt lassen, um eigenen Text einzugeben.
</textarea>
<input type=button class="js-button" value="Markieren"onClick="this.form.mark.select();this.form.mark.focus();">
</form>
Text markieren und in die Zwischenablage kopieren:
Code für den <BODY> Bereich
<form name="eins">
<textarea class="js-area" rows="6" cols="35" name="eins">
Mit einem Klick auf den Button diesen Text "Markieren" und in die Zwischenablage kopieren. Dieser Text wurde automatisch eingefügt, man kann ihn aber auch bearbeiten oder das Textfeld unbelegt lassen, um eigenen Text einzugeben.
</textarea>
<input type=button class="js-button" value="Markieren & Kopieren"onClick="this.form.eins.select();this.form.eins.focus(); document.execCommand('Copy')">
</form>
Aus Zwischenablage einfügen:
Code für den <BODY> Bereich
<form>
<textarea class="js-area" rows="5" cols="35" name="paste"></textarea><input type=button class="js-button" value="Zwischenablage einfügen"
onClick="this.form.paste.focus();
document.execCommand('paste');">
</form>
Eingabe prüfen:
Code für den <BODY> Bereich
<script>
function check() {
if (document.checking.eingabefeld.value=='Überschreibe hier ....') {
alert('Bitte gebe doch etwas ein!');
} else {
alert('Deine Eingabe: ' + document.checking.eingabefeld.value + "!");
}
}
</script>
<form name="checking">
<input type=text size="35" class="js-area" name="eingabefeld"
value="Überschreibe hier ....">
<input type="button" class="js-button" value="Prüfen" onClick="check()">
</form>
Eingabefeld fokussieren:
Beim Laden der Seite wird das Eingabefeld zum beschreiben direkt fokussiert.
Code für den <BODY> Tag
onload="document.Feld.Eingabe.focus()"
Wer nicht mit Website X5 arbeitet:
<body onload="document.Feld.Eingabe.focus()">
Code für den <BODY> Bereich
<form name="Feld">
<input type="text" class="js-area" name="Eingabe">
</form>
Automatische Eingabe-Prüfung:
Der eingegebene Wert wird direkt überprüft.
Liegt der unter 100, wird er akzeptiert.
Ist der Wert über 100 wird er korrigiert.
Code für den <BODY> Bereich
<script>
function Pruefe() {
if (document.wert.eingabe.value >= 101) {document.wert.eingabe.value = 100;}
}
</script>
<form name="wert">
<input type="text" class="js-area" name="eingabe" onKeyup="Pruefe()">
</form>
Eingabefeld automatisch ändern:
Das Eingabefeld ändert automatisch den Inhalt und die Textfarbe.
Das Eingabefeld ändert automatisch den Inhalt und die Textfarbe.
Code für den <BODY> Bereich
<input type="text" class="js-area" size="35" value="Bitte Deinen Namen"
onFocus="if(this.value=='Bitte Deinen Namen') {
this.value='';
this.style.color='#FF0000';
}"
style="color: #B0B0B0;">
Text umwandeln:
Text in Groß- oder Kleinbuchstaben umwandeln.
Text in Groß- oder Kleinbuchstaben umwandeln.
Code für den <BODY> Bereich
<script>
function Klein() {
var a = document.gG.Big.value;a = a.toLowerCase();document.gG.Big.value = a;
}function Groß() {
var a = document.gG.Big.value;a = a.toUpperCase();document.gG.Big.value = a;
}
</script>
<form name="gG">
<input type=text class="js-area" name="Big" size="35"
value="DAs iSt EIN teXT alS BeiSpIEl."><br>
<input type=button class="js-button" value="Groß" onClick="Groß()"><input type=reset class="js-button" value="Reset"><input type=button class="js-button" value="Klein" onClick="Klein()">
</form>
Hintergrundfarbe ein- und ausschalten:
Die Hintergrundfarbe kann über eine Checkbox verändert werden.
Die Hintergrundfarbe kann über eine Checkbox verändert werden.
Code für den <BODY> Bereich
<form name="Color">
Hintergrund-Farbe ein/aus<input type=checkbox class="js-area" name="ok" onClick="
if (document.Color.ok.checked) {
document.getElementById('Farbe').style.backgroundColor = '#FFFF00';
} else {
document.getElementById('Farbe').style.backgroundColor = '#FFFFFF';
}"><textarea rows="6" cols="35" id="Farbe" border="1px solid #000"></textarea>
</form>
Tasteneingaben zählen
Bei manchen Formularen ist es wichtig die Textlänge anzuzeigen.
Bei manchen Formularen ist es wichtig die Textlänge anzuzeigen.
Code für den <BODY> Bereich
<script>
function CheckLen(Target) {
var StrLen = Target.value.lengthif (StrLen == 1 && Target.value.substring(0,1) == " ") {
Target.value = ""; StrLen = 0;
}if (StrLen > 400 ) {
Target.value = Target.value.substring(0,400);
var CharsLeft = 0;
} else {
var CharsLeft = 400 - StrLen;
}document.Zahl.Anzahl.value = CharsLeft;
}
</script>
<form name="Zahl">
Sie haben noch:<input class="js-area" type="text" name="Anzahl" size="3" maxlength="3" readonly>
Zeichen
<textarea class="js-area" rows="6" cols="35" onChange="CheckLen(this)"
onFocus="CheckLen(this)" onKeyDown="CheckLen(this)" onKeyUp="CheckLen(this)">
</textarea>
</form>
Text bei Mouseover ändern:
Text beim überfahren mit der Maus ändern lassen.
Text beim überfahren mit der Maus ändern lassen.
Dieser Text ändert sich beim Überfahren mit der Maus.
Code für den <BODY> Bereich
<span style="color: #000; font-size: 14px; font-weight: bold;"
onMouseOver="this.innerHTML=
Dieser Text hat sich beim Überfahren mit der Maus nun 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 zählen:
Es wird ermittelt wieviele Großbuchstaben im Text vorhanden sind.
Es wird ermittelt wieviele Großbuchstaben im Text vorhanden sind.
Code für den <BODY> Bereich
<script>
function Gross_Zahl() {
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 Gross_Zahl = document.gCount.Eingabe.value;var wert = 0;for (var i = 0; i < Gross_Zahl.length; i++) {
for (var r = 0; r < Feld.length; r++) {
if ( Gross_Zahl.substr(i,1) == Feld[r]) {
wert++;
}
}
}alert("Dieser Text enthält " + wert + " große Buchstaben.");
}
</script>
<form name=gCount>
<textarea class="js-area" rows="6" cols="35" name="Eingabe">
</textarea>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.
<input type="button" class="js-button" value="Großbuchstaben zählen"
onClick="Gross_Zahl();">
</form>
Textzeichen zählen:
Es wird ermittelt wieviele Zeichen im Text vorhanden sind.
Es wird ermittelt wieviele Zeichen im Text vorhanden sind.
Code für den <BODY> Bereich
<script>
function All_Zahl() {
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","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 All_Zahl = document.aCount.Eingabe.value;var wert = 0;for (var i = 0; i < All_Zahl.length; i++) {
for (var r = 0; r < Feld.length; r++) {
if ( All_Zahl.substr(i,1) == Feld[r]) {
wert++;
}
}
}alert("Dieser Text enthält insgesamt " + wert + " Zeichen.");
}
</script>
<form name=aCount>
<textarea class="js-area" rows="6" cols="35" 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" class="js-button" value=" Zeichen zählen "
onClick="All_Zahl();">
</form>
» nach oben «