JavaScript Textarea - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Direkt zum Seiteninhalt

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 einfügen und Textelemente anpassen.

Die hier gezeigten Elemente sind Standard formatiert und können der Homepage angepasst werden:
Download Button
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 fokussiert.
Code für den <BODY> Bereich
<body onload="document.Feld.Eingabe.focus()">
<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.

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.


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.

Hintergrund-Farbe ein/aus
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.

Sie haben noch: Zeichen
Code für den <BODY> Bereich
<script>
function CheckLen(Target) {
var StrLen = Target.value.length
if (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.

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.

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">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=" Großbuchstaben zählen "
onClick="Gross_Zahl();">
</form>
Textzeichen zählen:
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>
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


            CAPTCHA
            Vielen Dank für Dein Feedback.
            Logo Host Europe
            Button Spenden

            © 2009 - 2020




            
            Besucher Statistik
            » 1 Online
            » 75 Heute
            » 1 Gestern
            » 75 Woche
            » 328 Monat
            » 44385 Jahr
            » 268591 Gesamt
            Record: 1144 (01.02.2020)
            Gesamt Downloads:
            Hosting by
            Zurück zum Seiteninhalt