Zeichen einfügen- Funktionsverallgemeinerung

Degers · 13 November 2011

Hallo,

Zum Einfügen bestimmter Sonderzeichen nutze ich bisher, da selbst wenig bis keine Ahnung von Javascript, folgenden gefundenen Schnipsel:

HTML:

function specialchars_extlearning(Text) { 
document.ext_learning.guest_translation.value = 
document.ext_learning.guest_translation.value + Text; 
document.ext_learning.guest_translation.focus(); 
}

Im angesprochenen Input guest_translation wird folglich der gewünschte Text eingetragen. Da ich die Funktion aber in immer mehr Inputs benötige ist es unpraktisch für jedes Textfeld eine Funktion zu erstellen, daher möchte ich eine allgemeine Funktion entwickeln.
Nun sieht mein Versuch der Allgemeinerung folgendermaßen aus:

HTML:

function specialchars (form, input, text){
document.form.input.value = 
document.form.input.value + Text; 
document.form.input.focus();  }

Leider fühlt sich bei einem Versuch das Textfeld nicht angesprochen, spreche ich es falsch an?
Der Versuchsaufbau sieht vollständig derzeit so aus, weil ich mir nicht sicher war hab ich allen mal sowohl id als auch name gegeben:

HTML:

<input onclick="specialchars('peter','uschi','Č')" type="submit" value="Č">
<form name="peter" id="peter">
<input id="uschi" name="uschi"></form>

threadi · 13 November 2011

document.form ist ein reservierter Name. Da wird in deinem Fall nicht einfach an Stelle von "form" -> "peter" gesetzt.

Vorschlag zur besseren Umsetzung:
Du solltest mit Objekten arbeiten.

JS:

Code:

function specialchars ( obj, text){
obj.value = obj.value + Text; 
obj.focus(); 
}

HTML:

<input onclick="specialchars(document.getElementById('uschi'),'Č')" type="submit" value="Č">
<form name="peter" id="peter">
<input id="uschi" name="uschi"></form>

Alternativ:

Code:

function specialchars ( objid, text){
document.getElementById(objid).value = document.getElementById(objid).value + Text; 
document.getElementById(objid).focus();
}

Hinweis: onclick in einem input-submit ohne Rückgabewert führt dazu, dass das umgebende Formular abgeschickt wird. Wenn Du das nicht willst, müsstest Du hier mit return-Werten arbeiten.

Degers · 13 November 2011

Danke schonmal,

Sowohl mit dem ersten Vorschlag als auch mit der Alternative wird nichts im Input eingetragen.

Aktueller Aufbau:

HTML:

<script type="text/javascript">
function specialchars (objid,text){
document.getElementById(objid).value = document.getElementById(objid).value + Text;
document.getElementById(objid).focus();
}
</script>
<input onclick="specialchars(document.getElementById('uschi'),'Č')" type="submit" value="asd">
<form name="peter" id="peter">
<input id="uschi" name="uschi">
</form>

Case-Sensitive scheinen Javascriptfunktionen nicht zu sein (text- Text).
Zum Hinweis,bisher wurde das Formular nicht abgeschickt, wenn ich die oben beschriebene Funktion nutzte, grundsätzlich ist die Verwendung von return (sollte es äquivalent zu PHP-Funktionen sein verstehe ich es) in der Tat sinnvoll.

//Edit

Interessanter Effekt, mit der ersten Variante kriege ich die folgende Ausgabe:
function Text() { [native code] }

Degers · 13 November 2011

So, funktioniert nun, danke für die Hilfe.
Die Ausgabe "function Text() { [native code] }" entstand durch die Klein- und Großschreibung von Text, nun funktioniert es wie gewünscht. :)

Gibt es eine Möglichkeit, dass die Funktion selbst erkennt in welchem Input man sich gerade befindet? Teilweise gibt es 6 Inputs, ich wüsste nicht wie ich das sonst lösen sollte.

NetAktiv · 13 November 2011

Du könntest dem aufrufenden Input eine id oder einen eindeutigen name geben und dann den Parameter caller (statt input) nennen und die function mit dem Wert this (zeigt dann auf das aufrufende input object) aufrufen. Im code machst dann
caller_id = caller.id;
oder
caller_name = caller.name;
und in Abhängigkeit vom caller_name oder caller_id machst dann deine Logik.

Degers · 15 November 2011

Die eindeutige Zuweisung ist kein Problem, die ist für die Verarbeitung sowieso gegeben. Wo hab ich denn einen Parameter input, den ich ersetzen könnte? Ist diese Funktion mit caller gemeint?

Letztendlich ist die Frage: Wie kann ich anstelle einer Input-ID den aktuellen Focus an die Javascript-Funktion weitergeben bzw. wie kann ich Diesen auslesen?

NetAktiv · 15 November 2011

Probier mal, all deinen input-Feldern eine id zu geben und definiere onclick="processmyid(this);", dann siehst, was ich meine, wenn

Code:

function processmyid(caller) {
    alert('Klick von Caller mit Id=' + caller.id);
}

Du kannst dann in der Funktion auf alle Attribute des Callers zugreifen (id, name, style, ...). Du könntest dann in der function processmyid in Abhängigkeit vom Caller etwas tun. Im Moment rufst ja specialchars
für jeden Input anders auf, so könntest die Programmlogik in eine zentrale Funktion verlagern und der onclick wäre identisch für alle.

Degers · 15 November 2011

Okay, ich gebe mir Mühe!

So siehts im Test derzeit aus:

HTML:

<html>  
 <head>       
<title>Test</title>                
<script type="text/javascript">             
function specialchars (caller,text){
caller.id.value = caller.id.value + text; 
caller.id.focus(); 
}
</script>   
</head>   
<body>      
<input id="test" onclick="processmyid(this);">
<input onclick="specialchars('Č')"" type="submit" value="Č">  
</body> 
</html>

Ich gebe dem Input eine ID, die wohl mithilfe von processmyid von was auch immer erkannt wird. Diese kann/sollte in der Javascriptfunktion dann wie auch immer weiterverarbeitet werden, in diesem Fall, wie im ersten Schritt erarbeitet, zum Einfügen von Sonderzeichen genutzt werden.
Nun weiß ich nicht, ob ich specialchars den Parameter caller irgendwie geben muss, damit er damit arbeiten kann.
Die andere Sache ist ob ich es nun richtig verwende, statt die zuvor genutzte Variable obj zur Weitergabe der ID habe ich nun caller.id eingefügt.

threadi · 16 November 2011

Die Variable caller wäre in deinem Fall mit dem einzufügenden Zeichen gefüllt. Das ist ja nicht dein Ziel. Du musst das Objekt als ersten Parameter übergeben. Das Objekt hat die ID "test", also kannst Du es so ansprechen:

HTML:

<input onclick="specialchars(document.getElementById('test'), 'Č')"" type="submit" value="Č">

Degers · 16 November 2011

So ist aber doch festgelegt, dass das Zeichen genau im Feld mit der id Test eingefügt wird, soweit funktioniert es schon.
Das Problem ist, dass bspw für Konjugationen bis zu 6 Inputs vorhanden sind. Das Sonderzeichen soll in dem Feld eingefügt werden, in dem der Cursor gerade ist. Oder versteh ich die Zeile falsch?
Zur Verdeutlichung der Situation mal einen Ausschnitt aus der Einsatzrealität:

HTML:

<form method="POST" action="?page=learning&amp;tab=conjugation_evaluation" name="check_conjugation">
<input type="hidden" name="id" value="<? echo $row->present_verb_id; ?>">
<table style="color:#A7A3A3;text-align:right;">
<tr>
<td>ja</td>
<td><input name="first_sg" placeholder="1. Person Singular" id="first_sg"></td>
</tr>
<tr>
<td>ti</td>
<td><input name="second_sg" placeholder="2. Person Singular" id="second_sg"> </td>
</tr>
<tr>
<td>on/ona/ono</td>
<td><input name="third_sg" placeholder="3. Person Singular"  id="third_sg"></td>
</tr>
<tr>
<td>mi</td><td><input name="first_pl" placeholder="1. Person Plural" id="first_pl"> </td>
</tr>
<tr>
<td>vi</td>
<td><input name="second_pl" placeholder="2. Person Plural"  id="second_pl"></td>
</tr>
<tr>
<td>oni</td>
<td><input name="third_pl" placeholder="3. Person Plural"  id="third_pl"></td>
</tr>
<tr>
<td></td>
<td style="text-align:center;height:40px;"><input type="submit" style="width:40%;font-weight:bold;height:70%;" value="Prüfen">
</td>
</tr>
</table>
</form>
<div id="extlearning_randomspecialchars">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'Č')"" type="submit" value="Č">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'Ć')"" type="submit" value="Ć">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'&#352')"" type="submit" value="Š">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'Ž')"" type="submit" value="Ž">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'Đ')"" type="submit" value="Đ">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'č')"" type="submit" value="č">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'ć')"" type="submit" value="ć">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'đ')"" type="submit" value="đ">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'š')"" type="submit" value="š">
<input onclick="specialchars(document.getElementById('extlearning_randominput'),'ž')"" type="submit" value="ž">
</div>

Hier sind die Sonderzeichen nun alle auf ein anderes Feld "ausgerichtet".

threadi · 16 November 2011

Der Funktionsaufrufe wie ich es geschrieben habe ermöglicht das Einfügen von diesen Zeichen in beliebigen Feldern. Du könntest sie auch für andere Formulare verwenden, sie ist eher allgemeingültig.

Wenn es dir darum geht die Zeichen über diese Funktion nur in einem einzigen Formularfeld einzufügen und somit unflexibel zu bleiben, dann reicht folgendes (wieder in Bezug auf ein kurzes Beispiel):

HTML:

<html>  
 <head>       
<title>Test</title>                
<script type="text/javascript">             
function specialchars (text){
 var caller = document.getElementById("test");
 caller.id.value = caller.id.value + text; 
 caller.id.focus(); 
}
</script>   
</head>   
<body>      
<input id="test" onclick="processmyid(this);">
<input onclick="specialchars('Č')"" type="submit" value="Č">  
</body> 
</html>

Wenn man es perfekt machen möchte, müsste man auch prüfen, ob das angesprochene Element überhaupt existiert, dadurch verhindert man Fehlermeldungen durch falsche Aufrufe, also:

Code:

function specialchars (text){
 if( document.getElementById("test") )
 {
   var caller = document.getElementById("test");
   caller.id.value = caller.id.value + text; 
   caller.id.focus(); 
 }
}

Degers · 16 November 2011

Wenn es dir darum geht die Zeichen über diese Funktion nur in einem einzigen Formularfeld einzufügen und somit unflexibel zu bleiben, dann reicht folgendes (wieder in Bezug auf ein kurzes Beispiel):

Nicht im Geringsten, in dem Fall müsste ich ja für alle 6 Inputs die Buttons erstellen, was doch leicht unübersichtlich wäre. Die Sonderzeichen sollen dort eingesetzt werden, wo gerade der Focus ist.
Ich frage nach weil

HTML:

<input onclick="specialchars(document.getElementById('test'), 'Č')"" type="submit" value="Č">

doch auch auf das Inputfeld mit der ID test bezogen ist oder?

threadi · 16 November 2011

Ja, und Du kannst den Aufruf ja auch modifizieren. Daher wäre die Funktion ja auch so flexibel nutzbar.

HTML:

<input onclick="specialchars(document.getElementById('test'), 'Č')"" type="submit" value="Č">

HTML:

<input onclick="specialchars(document.getElementById('anderesFeld'), 'Č')"" type="submit" value="Č">

HTML:

<input onclick="specialchars(document.getElementById('nochEinFeld'), 'Č')"" type="submit" value="Č">

Degers · 16 November 2011

Richtig, und genau da liegt mein Problem. Ich kann natürlich ein beliebiges Feld angeben, aber ich weiß ja nicht, in welchem der User sich gerade befindet. Daher müsste anstelle der ID wohl etwas, was erkennt wo der Focus des Users gerade ist. Ansonsten sind die Zeichen stets auf ein Inputfeld begrenzt, alle Zeichenbuttons sollen aber für alle Felder "zuständig" sein, jenachdem wo der User gerade schreibt.

Wenn ich nun die obige, durchaus gute Funktion nutzen würde, würde es, um bei meinem Einsatzbeispiel zu bleiben so aussehen:

HTML:

<input onclick="specialchars(document.getElementById('first_sg'),'Č')" type="submit" value="Č">
<input onclick="specialchars(document.getElementById('first_sg'),'Ć')" type="submit" value="Ć">
<input onclick="specialchars(document.getElementById('first_sg'),'&#352')" type="submit" value="Š">
<input onclick="specialchars(document.getElementById('first_sg'),'Ž')" type="submit" value="Ž">
<input onclick="specialchars(document.getElementById('first_sg'),'Đ')" type="submit" value="Đ">
<input onclick="specialchars(document.getElementById('first_sg'),'č')" type="submit" value="č">
<input onclick="specialchars(document.getElementById('first_sg'),'ć')" type="submit" value="ć">
<input onclick="specialchars(document.getElementById('first_sg'),'đ')" type="submit" value="đ">
<input onclick="specialchars(document.getElementById('first_sg'),'š')" ype="submit" value="š">
<input onclick="specialchars(document.getElementById('first_sg'),'ž')" type="submit" value="ž">

<input onclick="specialchars(document.getElementById('second_sg'),'Č')" type="submit" value="Č">
<input onclick="specialchars(document.getElementById('second_sg'),'Ć')" type="submit" value="Ć">
<input onclick="specialchars(document.getElementById('second_sg'),'&#352')" type="submit" value="Š">
<input onclick="specialchars(document.getElementById('second_sg'),'Ž')" type="submit" value="Ž">
<input onclick="specialchars(document.getElementById('second_sg'),'Đ')" type="submit" value="Đ">
<input onclick="specialchars(document.getElementById('second_sg'),'č')" type="submit" value="č">
<input onclick="specialchars(document.getElementById('second_sg'),'ć')" type="submit" value="ć">
<input onclick="specialchars(document.getElementById('second_sg'),'đ')" type="submit" value="đ">
<input onclick="specialchars(document.getElementById('second_sg'),'š')" ype="submit" value="š">
<input onclick="specialchars(document.getElementById('second_sg'),'ž')" type="submit" value="ž">


<input onclick="specialchars(document.getElementById('third_sg'),'Č')" type="submit" value="Č">
<input onclick="specialchars(document.getElementById('third_sg'),'Ć')" type="submit" value="Ć">
<input onclick="specialchars(document.getElementById('third_sg'),'&#352')" type="submit" value="Š">
<input onclick="specialchars(document.getElementById('third_sg'),'Ž')" type="submit" value="Ž">
<input onclick="specialchars(document.getElementById('third_sg'),'Đ')" type="submit" value="Đ">
<input onclick="specialchars(document.getElementById('third_sg'),'č')" type="submit" value="č">
<input onclick="specialchars(document.getElementById('third_sg'),'ć')" type="submit" value="ć">
<input onclick="specialchars(document.getElementById('third_sg'),'đ')" type="submit" value="đ">
<input onclick="specialchars(document.getElementById('third_sg'),'š')" ype="submit" value="š">
<input onclick="specialchars(document.getElementById('third_sg'),'ž')" type="submit" value="ž">

Und das waren nur die ersten drei von sechs. Diese Aufgabe soll von nur einer Buttongruppe übernommen werden.

threadi · 16 November 2011

Ah, jetzt verstehe ich dein Problem. Anders formuliert: Du willst das fokusierte Element herausfinden. Dazu hätte ich folgende Idee:

Ergänze bei jedem Element, wo der Nutzer etwas eingeben kann, folgendes im onblur- oder onfocus-Attribut:

Code:

focuselement = this;

Dadurch wird in der globalen Variable "focuselement" ein Verweis auf das Objekt gespeichert. Du müsstest den Aufruf der Funktion dann lediglich folgendermaßen anpassen:

HTML:

<input onclick="specialchars(focuselement, 'Č')"" type="submit" value="Č">

Wie Du diese Variable nennst ist natürlich dir überlassen.

Ich bin mir unsicher, ob man das bei onblur oder onfocus ergänzen müsste. Das hängt imho vom Browser und vom Elementen-Typ (input oder textarea) ab.

Degers · 16 November 2011

Danke!

Genau das war gemeint, es funktioniert. Habe nun onFocus versucht und es funktioniert unter Chrome, Opera, Safari, IE und Firefox, dürfte daher recht allgemeingültig sein. Ältere Browserversionen teste ich später von einem anderen System.
Vielen Dank nochmal, schön wenn ein 4 Monate altes Problem endlich gelöst ist.

struppi · 16 November 2011

Ich weiß nicht, ob ich das richtig verstehe, aber das bisherige Vorgehen erscheint mir kompliziert. Kann es sein, dass du sowas suchst:

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<form action="" name="check_conjugation">
<p>
        <input type="button" value="Č">
        <input type="button" value="Ć">
        <input type="button" value="Š">
        <input type="button" value="Ž">
        <input type="button" value="Đ">
        <input type="button" value="č">
        <input type="button" value="ć">
        <input type="button" value="đ">
        <input type="button" value="š">
        <input type="button" value="ž">

</p>

<p>
Feld 1: <input name="test_1"><br>
Feld 2: <input name="test_1">
</p>

</form>

<script type="text/javascript">
function start() {
	var f = document.forms.check_conjugation;
	if(!f) return;
	var focus = null;
	f.onclick = function(e){
		if(!e) e = window.event;
		var o = e.target || e.srcElement;
		if(!o) return;

		if(o.type === 'text') focus = o;
		else if(o.type === 'button' && focus) focus.value += o.value;
	};
}
start();
</script>
</body>
</html>

Degers · 16 November 2011

Bringt auf jeden Fall auch das gewünscht Ergebnis, offenbar mit weniger Schreibarbeit, ist das von der Performance her egal oder tut sich da was?
Wieso muss die Javascriptfunktion nach dem Formular kommen?

threadi · 16 November 2011

JavaScript-Events nicht inline anzugeben ist immer das Ziel, dafür ist o.g. Funktion auch gedacht. Die Funktion selbst kannst Du auch im <head> oder (besser) in einer externen Datei definieren. Der Aufruf start() muss jedoch kommen nachdem der HTML-Code generiert wurde, im einfachsten Fall wie oben geschrieben nach dem HTML-Code auf den die Funktion zugreift. Die Alternative wäre noch die Prüfung, wann der HTML-Code komplett geladen wurde und dann erst die Ausführung von start() anzustoßen. Mit jQuery geht das relativ einfach, muss aber für sowas einfaches nicht verwendet werden.

Degers · 16 November 2011

Es funktionierte nicht als es im Head war, weil ich start(); nicht hinter dem Formular hatte sondern einfach mitkopiert hatte. Sieht auf jedenfall sauberer aus, danke.

Zeichen einfügen- Funktionsverallgemeinerung

Mitglied

Moderator

Mitglied

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

Moderator

Mitglied

struppi

Guest

Mitglied

Moderator

Mitglied