• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Mehrere gleiche Scripts zu einem zusammenfügen

C

Countii

New member
Hallo!
Neuer Tag - neues Problem.

Für ein Formular verwende ich mehrere textarea Elemente. Jede davon ist mit einem Zeichenzähler versehen, welcher dem Nutzer mitteilt, wie viele Zeichen er noch eingeben kann. Das Problem dabei: ich habe zwei Dutzend solcher Eingabefelder und für jedes davon ein Script zum Zählen der Zeichen.

Gibt es da eine Möglichkeit das ganze in einem einzigen Script unterzubringen und die ID des jeweiligen Textfelds (welches gerade beschrieben wird) irgendwie dynamisch weiterzugeben?

Hier das von mir verwendete Script:

Code: 
function [COLOR="#FF0000"]IDdesEingabefeldsNr1[/COLOR](InputStr) {
		StrLen = InputStr.value.length
		if (StrLen == 1 && InputStr.value.substring(0,1) == " ") {
			InputStr.value = ""
			StrLen = 0
		} else {
			CharsLeft = 35 - StrLen
		}
		document.tag.[COLOR="#FF0000"]IDdesAusgabefeldsNr1[/COLOR].value = CharsLeft
	}

function [COLOR="#FF0000"]IDdesEingabefeldsNr2[/COLOR](InputStr) {
		StrLen = InputStr.value.length
		if (StrLen == 1 && InputStr.value.substring(0,1) == " ") {
			InputStr.value = ""
			StrLen = 0
		} else {
			CharsLeft = 35 - StrLen
		}
		document.tag.[COLOR="#FF0000"]IDdesAusgabefeldsNr2[/COLOR].value = CharsLeft
	}

Vielen lieben Dank im Voraus!
Countii
 
so in etwa:

Code: 
function zaehler(IDdesEingabefelds,InputStr) {
		StrLen = InputStr.value.length
		if (StrLen == 1 && InputStr.value.substring(0,1) == " ") {
			InputStr.value = ""
			StrLen = 0
		} else {
			CharsLeft = 35 - StrLen
		}
		document.tag.[IDdesEingabefelds].value = CharsLeft
	}

aufzurufen mit
HTML: 
 zaehler(this.id,InputStr)

InputStr müsste beim Aufruf natürlich durch den entsprechenden Inhalt, wie bereits jetzt verwendet, ersetzt werden,
aber dabei fällt mir gerade ein, was genau übergibst du da eigentlich?

theoretisch kannst du ja auch gleich den jeweiligen Value mit übergeben:
HTML: 
 zaehler(this.id,this.value)

dann müsstest du die funktion aber etwas umbauen, zum Beispiel:

Code: 
function zaehler(IDdesEingabefelds,VALUEdesEingabefeldes) {
		StrLen = VALUEdesEingabefeldes.length
		if (StrLen == 1 && VALUEdesEingabefeldes.substring(0,1) == " ") {
			VALUEdesEingabefeldes = ""
			StrLen = 0
		} else {
			CharsLeft = 35 - StrLen
		}
		document.tag.[IDdesEingabefelds].value = CharsLeft
	}
 
Zuletzt bearbeitet:
[GELÖST] Mehrere gleiche Scripts zu einem zusammenfügen

Danke für den Denkanstoß, habe darauf basierend alles umgekrempelt und jetzt funktioniert es wie gewollt :)

So hab ich es nun gelöst:

Eingabe im Frontend:
Code: 
<textarea id="[COLOR="#00FF00"]anlass[/COLOR]" name="anlass" maxlength="25" onClick="[COLOR="#FF0000"]counter(this.id,this.value,this.maxLength)[/COLOR]" onkeypress="[COLOR="#FF0000"]counter(this.id,this.value,this.maxLength)[/COLOR]" onkeyup="[COLOR="#FF0000"]counter(this.id,this.value,this.maxLength)[/COLOR]" style="overflow:hidden" wrap="virtual" placeholder="<?php $table = mysql_query("SELECT * FROM tag_anlass ORDER BY id DESC LIMIT 0,1"); while ($row = mysql_fetch_assoc($table)) { echo $row['inhalt']; } ?>"></textarea>

Ausgabe im Frontend:
Code: 
<span>(noch <input class="zaehler" id="[COLOR="#00FF00"]anlass_ausgabe[/COLOR]" name="anlass_ausgabe" type="text" size="2" maxlength="2" value="25" readonly>Zeichen)</span>

Script im Backend:
Code: 
function [COLOR="#FF0000"]counter(clicked_id,clicked_value,clicked_maxLength)[/COLOR] {
	var name = ([COLOR="#00FF00"]clicked_id[/COLOR]);
	var output = ([COLOR="#00FF00"]name+"_ausgabe"[/COLOR]);
	var anzahl = (clicked_value);
	var maxl = (clicked_maxLength)
	var laenge = anzahl.length;
	var rest = maxl - laenge;	
	document.tag[COLOR="#00FF00"][output][/COLOR].value = rest
}

Größten Dank!!
Countii
 
Ich finde ja solches Rumgeschachere mit IDs und Namen ziemlich unschön.

Ich würde das so lösen:
Code: 
<!DOCTYPE html>

<html>
<head>
<title>Übrige Zeichen</title>
<style type="text/css">
.charDisplay {
	position: absolute;
	bottom: 100%;
	left: 0%;
}
.textareaWrapper {
	position: relative;
	margin-top: 1em;
	display: inline-block;
}
</style>
</head>
<body>
<textarea maxlength="265"></textarea>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<textarea maxlength="20"></textarea>
<textarea></textarea>
<script type="text/javascript">
Array.prototype.forEach.call(document.getElementsByTagName("textarea"), function(textarea){
	if (textarea.maxLength !== -1){
		var wrapper = document.createElement("span");
		wrapper.className = "textareaWrapper";
		textarea.parentNode.replaceChild(wrapper, textarea);
		wrapper.appendChild(textarea);
	
		var output = document.createElement("span");
		output.className = "charDisplay";
		textarea.parentNode.insertBefore(output, textarea);
		textarea.oninput = function(){
			output.innerHTML= "Noch " + (this.maxLength - this.value.length) + " Zeichen";
		};
		textarea.oninput();
	}
});
</script>
</body>
</html>
- funktioniert aber nur in modernen Browserns, die das input-Event kennen.

Aber auch wenn man das HTML für die Zeichenanzeige und die Eventlistener unbedingt schon im ursprünglichen Quelltext haben möchte, kann man das eleganter lösen:
HTML: 
<textarea name="anlass" maxlength="25" onClick="counter(this)" onkeypress="counter(this)" onkeyup="counter(this)" style="overflow:hidden" wrap="virtual" placeholder=""></textarea>

...

<span>(noch <span class="zaehler" id="anlass_ausgabe">25</span> Zeichen)</span>
Code: 
function counter(textarea) {
	var rest = textarea.maxLength - textarea.value.length;
	document.getElementById(textarea.name + "_ausgabe").innerHTML = rest;	
}

PS: Ich weiß ja nicht, wie deine DB gefüllt wird, aber ich würde alles, was aus der DB kommt und im HTML ausgegeben werden soll, durch htmlentities jagen um XSS und unerwünschte Darstellung zu vermeiden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben