Sonderzeichentabelle mit kleinem Js-Bug

L

Luke85

Mitglied
Guten Morgen,

bin eigentlich bei den PHP'lern unterwegs, doch ich habe mir eine Sonderzeichenzabelle zusammengeschrieben mit JS. Wähle ich ein Sonderzeichen aus, so wird dieses in den Zwischenspeicher kopiert und kann dann eingefügt werden.

Zwei kleine Macken hat das Ganze: Er fügt immer das jeweilige Sonderzeichen in den Speicher hinzu, anstatt immer nur eins zu kopieren und das vorherige zu löschen. Klicke ich auf "Nicht zulassen" nach Auswahl eines Sonderzeichens, kopiert er diesen trotzdem in den Speicher.
Wie kann ich das denn am besten beheben? Hier mal der Code, zur besseren Vorstellung:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript">
<!--
	function sonderzeichen(Zeichen)
	 {
	    window.document.zusatz.Display.value = window.document.zusatz.Display.value + Zeichen;   
		window.clipboardData.setData('text', document.zusatz.Display.value);
 	 }
//-->
</script>


<title>Sonderzeichentabelle</title>
</head>

<body>

<p><strong>Zeichentabelle für Sonderzeichen</strong></p>
<form name="zusatz">
<table width="150" border="1">
  <tr>
    <td width="50"><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#64')" value="&#64" /></div></td>
    <td width="50"><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#169')" value="&#169" /></div></td>
    <td width="50"><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#174')" value="&#174" /></div></td>
  </tr>
  <tr>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#945')" value="&#945" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#955')" value="&#955" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#937')" value="&#937" /></div></td>
  </tr>
  <tr>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#126')" value="&#126" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#8776')" value="&#8776" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#8734')" value="&#8734" /></div></td>
  </tr>
  <tr>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#177')" value="&#177" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#216')" value="&#216" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#215')" value="&#215" /></div></td>
  </tr>
  <tr>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#8804')" value="&#8804" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#8805')" value="&#8805" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#402')" value="&#402" /></div></td>
  </tr>
  <tr>
  <td colspan="3">Währung</td>
  <tr>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#8364')" value="&#8364" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#162')" value="&#162" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#163')" value="&#163" /></div></td>
  </tr>
  <tr>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#164')" value="&#164" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#165')" value="&#165" /></div></td>
    <td><div align="center"><input type="button" style="width:35px; height:35px" onClick="sonderzeichen('&#131')" value="&#131" /></div></td>
  </tr> 
  <tr>
    <td colspan="3"><input name="Display" type="hidden" /></td>
    </tr>
</table>
</form>
</body>
</html>


P.S.: Diese Tabelle wird in ein Eingabeskript implementiert werden. Mit welcher Funktion kann ich denn das jeweilige Sonderzeichen direkt in eine Textbox füllen, ohne mühsam per Mausklick oder Tastaturkombi das Sonderzeichen händisch einzufügen?
 
Zuletzt bearbeitet:
Hi,
bezüglich des ersten Fehlers (die Zwischenablage wird erweitert statt überschrieben) - das is nur was kleines:
statt:
HTML: 
window.document.zusatz.Display.value = window.document.zusatz.Display.value + Zeichen;
musst du
HTML: 
window.document.zusatz.Display.value =  Zeichen;
schreiben.

du hast dem Display.value eine Zeichenverkettung zugewiesen in dem du der Eigenschaft Display.value durch deinen Code gesagt hast nimm deinen bisherigen Wert "+" den neuen Wert statt nimm nur den neuen Wert.
Dein 2tes Problem kann ich nicht simulieren, da ich vermutlich andere sicherheitseinstellungen in meinem Browser habe - aber ich nehme mal an wenn du "nicht zulassen" auswählst wird das neue Zeichen nicht hinzugefügt sondern du hast noch die zuvor hinzugefügten Zeichen in der Zwischenablage, was dich vermuten ließ, dass etwas neues hinzugefügt wurde.
 
Mörgen Jörg
Danke für deine Hilfe, das war die Lösung :)!
Und du hast Recht, er nimmt den alten Wert aus dem Zwischenspeicher, also lässt er es nicht zu. PERFEKT!! :)

Jetzt ist halt der Feinschliff mit dem direkten Einfügen in das Textfeld.
 
Hallo erstmal !
Bin heute auf diesen Eintrag gestossen, weiß also nicht, ob der Feinschliff mit dem direkten Einfügen noch aktuell ist.
Ich hab das ganze über ein Objekt in JavaScript gelöst.

Funktionsweise:
Für das jeweilige Textfeld ist ein kleiner Button installiert. Beim Klicken des Buttons öffnet sich ein Fenster mit der Tabelle der Sonderzeichen. Wenn ein Sonderzeichen angeklickt wird, wird dieses Sonderzeichen an den Wert des jeweiligen Textfeldes (ans Ende) eingefügt und das Fenster mit den Sonderzeichen schließt sich wieder.

Falls also noch Interesse besteht, einfach melden, dann kann ich dir die Funktionen mal
zukommen lassen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück