Javascript bei Klick auf Bild Text in Eingabefeld

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hi,
ich habe folgendes Problem:

Auf einer Internetseite kommt ein Eingabefeld in einem Formular rein und darunter ein Bild mit verschiedenen „Sonderzeichen“.
Beim Klick auf ein Teil (x,y Koordinate entscheident) des Bildes soll das Sonderzeichen im Format [Sonderzeichen A] in das Eingabefeld an der aktuellen Cursorposition eingefügt werden.

Könnt ihr mir da evtl etwas helfen? Ich habe so gut wie keine Ahnung von Java Script. Welche Befehle bräuchte ich dafür? Und wie würde das eingebunden werden? Über eine Dirty Version wäre ich auch sehr dankbar.

Gruß DuAK007

#2

Hi DuAK007.

Auf einer Internetseite kommt ein Eingabefeld in einem
Formular rein und darunter ein Bild mit verschiedenen
„Sonderzeichen“.
Beim Klick auf ein Teil (x,y Koordinate entscheident) des
Bildes soll das Sonderzeichen im Format [Sonderzeichen A] in
das Eingabefeld an der aktuellen Cursorposition eingefügt
werden.

Damit verschiedene Bereiche in deinem Bild klickbar werden brauchst du das hier: http://www.mediaevent.de/xhtml/map.html . Verwende dann das onclick ereignis.

Könnt ihr mir da evtl etwas helfen? Ich habe so gut wie keine
Ahnung von Java Script. Welche Befehle bräuchte ich dafür? Und
wie würde das eingebunden werden? Über eine Dirty Version wäre
ich auch sehr dankbar.

Nun kommt Javascript dran:

function insertSpecialChar(specChar)
{
element = document.getElementById('elementWoEinf');
element.value += specChar;
element.focus();
}

Vielleicht sind noch ein paar kleine Fehlerchen drinnen, aber es müsste funktionieren.

So als Leitfaden hilfts dir bestimmt.
Du brauchst:

  • HTML Map
    –> onclick(ereignis) > Javascript
  • Javascript
    –> function insertSpecialChar()
    -> document.getElementById
    -> value
    -> focus() -> optional

Schönen Tag.
Sebastian

#3

Hallo,
erstmal vielen Dank. Da sind einige gute Ideen dabei, die mir weiterhelfen. Aber leider ist nicht alles perfekt. Zum Beispiel wird das Sonderzeichen hinten angehängt statt an der Cursorposition eingefügt. Naja, aber darüber habe ich was im Netz gefunden.

Du hast mir aber eine gute Ausgangsbasis gegeben. Sollte ich nicht innerhalb der nächsten 3 Tage mich wegen Problemen diesbezüglich melden, kann dieser Artikel als geschlossen betrachtet werden.

#4

Hi,
ich habe folgenden kleinen Codeschnippsel zusammen:

function insertSpecialChar(specChar) {
// element = document.getElementById(‚resp39_‘);
element = document.forms[0].elements[0];
blnIe = document.selection,
element.focus();
intStart = element.selectionStart;
if(blnIe) { var sel = blnIe.createRange(); sel.text = specChar;}
else if (intStart) {
element.value =
element.value.substring(0,intStart) +
specChar+
element.value.substring(intStart+1,element.value.length) + intStart;}
else
element.value += specChar;
}

document.write(’’);
document.write(’’);
document.write(’’);

Wobei ich noch nicht so viel Wert auf die Map gelegt habe. Muss ich die Funktion irgendwie noch anpassen, dass sie auf allen gängigen Browsern läuft?

Weiterhin möchte ich den Code auf verschiedenen Seiten einbinden.
Daher habe ich oben zwei verschiedene Objektvarianten gemacht.
Die Formulare haben alle die Form von:

respxx\_

wobei xx für eine Zahl steht. Gibt es eine Möglichkeit, diese Bezeichnung direkt zu finden? Soweit ich weis, gibt es keine Wildcards. Aber durch suchen im Quelltext sollte man doch den Namen finden, oder? Man müsste also nach ‚name="resp‘ und ‚_"‘ suchen.

Vielen Dank schon mal für eure Hilfe.

#5

Ich melde mich erst jetzt wieder, weil ich dachte, der ist abgeschlossen, OK.

Hier nun deine Frage zu dem finden von name=‚xxx‘. Es gibt in Javascript getElementbyTagName… Dieses könntest du verwenden um name=‚xxx‘ zu finden.

1) getElementByTagName("")
2) for i to getelement...length
3) element.name == 'xxx' \> indexof()

Gruss,
Sebastian