Wie komm ich an die Mouseposition in einem Eingabefeld ran???
Stefen Baetge
- javascript
Hi alle zusammen,
nachdem ich ja nun tatsächlich doch eine Teillösung (wie so oft ein herzliches Danke schön an den Taugenichts Netscape :-( ) für mein anfängliches Problemchen gefunden habe - Auslesen des selektierten Textes in Textarea‚s oder Eingabefeldern, dafür schon mal herzlichen Dank - möcht ich die Sache jetzt noch perfektionieren.
Im Prinzip geht es um einen Online-Editor zur Pflege verschiedener Bereicher einer Website, da hier eigentlich keine Programmierkenntnisse gebraucht werden sollen, wäre eine Lösung - "auswählen - button klicken und tag drum - fertig" - so ala word oder so nicht übel :-) (bisher hab ich erst mal nur ne cut and paste variante eingebaut) - nun und mit dem, zumindest im Explorer möglichen, Auslesen eines markierten textteils aus eingabefeldern sieht die sache schon echt komfortabel aus, aber da ist mir beim test natürlich direkt noch ein haken aufgefallen: ich selektiere nur ein Zeichen - tja da hängt die Sache dann, wenn ich nicht die genaue Mouseposition zum textteil hab - ansonsten bleibt ja nur übrig alle oder das erste gefundene gleiche Zeichen zu ersetzen, nicht ganz so brilliant :-)
Ich hoffe es konnte mir einige von Euch folgen und wäre begeistert, wenn es für oben genanntes Problem eine Lösung gäbe.
Bisweilen noch allen viel Spaß beim Tüfteln ...
Hallo Stefen!
hmmm... deine Nachricht habe ich jetzt dreimal gelesen und
mir ist nicht so ganz klar, wofür du die Position der Maus
brauchst.
Könntest du das vielleicht nochmal erklären? So richtig hab
ich das nicht verstanden.
Bis dann
Alex!
Hi Alex,
erstmal herzlichen Dank für Deinen Lösungsvorschlag - muss ich gleich mal durchtesten. So jetzt aber mal eben noch mal zur genauen Verwendung:
Es geht um ein Verwaltungstool für Webseiten, welches ich gerade programmiere. Mit diesem ist dann eine redaktionelle Bearbeitung verschiedener Bereiche mit Hilfe komfortabler Eingabemasken möglich - Newsbereiche, Gästebuchpflege, Forumsverwaltung usw., eben je nach Angebot der jeweiligen Webseite. Und da der Nutzer auch die Möglichkeit haben soll in gewissen Textfeldern kleinere HTML-Formatierungen mit einzupflegen (fettdruck, kursiv und son schnickschnack), war ich hierfür auf der Suche nach einer auch für Laien recht einfachen Lösung (momentan gibt es eben eine cut and paste Möglichkeit einiger Tags). Und da war eine Umsetzung wie aus diversen bekannten texteditoren schon recht naheliegend, sprich eben auswählen des textbereichs und durch betätigen eines Buttons direkt die tags einfügen. Und im IE (im Netscape stehen diese Funktionen eh nicht zur Verfügung) gibt es eben die Möglichkeit markierten Text auszulesen und somit ist das prinzip eigentlich schon funktionabel. Hier nur kurz der Scriptteil damit Du evtl. ein wenig klarer siehst:
function auswahl(art) {
if (aktivFeld != "") {
tmpFeld = eval("document.maske." + aktivFeld);
tmpFeld1 = tmpFeld.value;
tmp = document.selection.createRange();
if (tmp.text != "") {
if (art == 1) tmpNeu = tmpFeld1.replace(String(tmp.text),"<b>" + tmp.text + "</b>");
if (art == 2) tmpNeu = tmpFeld1.replace(String(tmp.text),"<i>" + tmp.text + "</i>");
if (art == 3) tmpNeu = tmpFeld1.replace(String(tmp.text),"<u>" + tmp.text + "</u>");
tmpFeld.value = tmpNeu;
}
aktivFeld = "";
}
}
die variable aktivFeld wird je nach focussiertem Eingabe gesetzt. So nun ergab sich eben nur das Problem, dass ja evtl. nur ein Zeichen im Text ausgewählt wurde und dann hab ich ohne die exakte Position des Cursors nicht mehr die Möglichkeit die exakte Position im Text mit tags zu versehen - klar oder?
So leider liegt das ganze noch in einer Testumgebung und ich kann leider noch keine URL zum Reinschauen anbieten, aber spätestens zum 1.11. ist das alles und noch viel mehr unter - http://www.i-fac.de zu betrachten. Bis dahin müssen ich und meine Partner aber noch einiges tun. Und als erstes werd ich mich jetzt mal mit Deinem Lösungsvorschlag auseinandersetzen. Herzlichen Dank nochmals, ich hoffe Du hast nun ungefähr kapiert wofür ich die Angabe brauche :-)
bis dann
stefen
Hallo Stefan,
So nun ergab sich eben nur das Problem, dass ja evtl. nur ein Zeichen im Text ausgewählt wurde und dann hab ich ohne die exakte Position des Cursors nicht mehr die Möglichkeit die exakte Position im Text mit tags zu versehen - klar oder?
Das sollte eigentlich dein Problem lösen, sofern es lösbar ist:
<../../sfarchiv/2000_2/t14503.htm#a73774>
<../../sfarchiv/2000_2/t14503.htm#a73838>
Viele Grüße
Antje
Hi,
Ich hoffe es konnte mir einige von Euch folgen und wäre begeistert, wenn es für oben genanntes Problem eine Lösung gäbe.
Bisweilen noch allen viel Spaß beim Tüfteln ...
Tüfteln musst Du schon selber!
Es gibt keine direkte Möglichkeit, wie in einem Texteditor, die Position des Cursors in einem Textfeld auszulesen.
Du wirst das schon über "Suchen/Ersetzen/Einfügen" realisieren müssen.
Grüße,
Martin
Hallo Martin!
Es gibt keine direkte Möglichkeit, wie in einem Texteditor, die Position des Cursors in einem Textfeld auszulesen.
Doch, die Möglichkeit gibt es (im Internet Explorer).
Beispiel Cursor:
<textarea onkeyup="alert('X='+ event.offsetX + ' Y='+ event.offsetY)">
</textarea>
Beispiel Maus:
<textarea onclick="alert('X='+ event.offsetX + ' Y='+ event.offsetY)">
</textarea>
Ich hatte bloss nicht verstanden, wozu er die Position braucht.
Bis dann
Alex!
Hi Laex,
Es gibt keine direkte Möglichkeit, wie in einem Texteditor, die Position des Cursors in einem Textfeld auszulesen.
Hatte mich nicht genau ausgedrückt.
Ich meinte natürlich, mittels einer vordefinierten Eigenschaft/Methode, die bei Aufruf sofort das "charAt" zurückgibt.
Gruß,
Martin
Hallo Martin!
Achso - , das weiss ich auch nix.
Meinte er das denn auch so?
Na ja, müssen wir mal warten bis er sich meldet.
Bis dann
Alex!
Hallo alle zusammen,
herzlichen Dank für Eure Bemühungen, hab die Sache jetzt lauffähig bekommen. Allerdings nur im IE, denn der Netsacpe weigert sich immer noch mir eine ausgewählte Textpassage aus einem Eingabefeld zu ermitteln, ausgewählter Text auf der Seite an sich ist kein Problem, hilft mir aber in meinem Falle nicht weiter - leider. Aber egal, wichtig ist, dass die Sache da wo sie nu funktioniert wenigstens absolut narrensicher ist. Nun gut, lange rede - kurzer Sinn, hier meine Lösung für das Problem:
<script language="JavaScript">
<!--
var nn=document.layers?true:false;
var ie=document.all?true:false;
var aktivFeld = "";
function auswahl(art) {
if ((aktivFeld != "") && (ie)) {
tmpFeld = eval("document.maske." + aktivFeld);
tmpFeld1 = tmpFeld.value;
tmp = document.selection.createRange();
if (tmp.text != "") tmp.text = "<" + art + ">" + tmp.text + "</" + art + ">";
aktivFeld = "";
}
return;
}
//-->
</script>
...
<form name="maske">
<a href="javascript:auswahl('b');" onmouseover="window.defaultStatus='';window.status='ausgewählten Text im Fettdruck darstellen';return true"><img src="gif/fett.gif" width=17 height=17 border=0 alt="Fettschrift"></a>;
<a href="javascript:auswahl('i');" onmouseover="window.defaultStatus='';window.status='ausgewählten Text kursiv darstellen';return true"><img src="gif/kursiv.gif" width=17 height=17 border=0 alt="Kursivschrift"></a>;
<a href="javascript:auswahl('u');" onmouseover="window.defaultStatus='';window.status='ausgewählten Text unterstrichen darstellen';return true"><img src="gif/ulinie.gif" width=17 height=17 border=0 alt="Unterstrich"></a>;
<textarea onselect="aktivFeld = 'meldung1';return true" onblur="window.status='';return true" onkeypress="window.status='Momentane Feldgröße: ' + (this.value.length+1) + ' Zeichen (max.64 KB)';return true" name="meldung1" rows=6 cols=43 wrap=virtual></textarea>
<textarea onselect="aktivFeld = 'meldung2';return true" onblur="window.status='';return true" onkeypress="window.status='Momentane Feldgröße: ' + (this.value.length+1) + ' Zeichen (max.64 KB)';return true" name="meldung2" rows=6 cols=43 wrap=virtual></textarea>
<textarea onselect="aktivFeld = 'meldung3';return true" onblur="window.status='';return true" onkeypress="window.status='Momentane Feldgröße: ' + (this.value.length+1) + ' Zeichen (max.64 KB)';return true" name="meldung3" rows=6 cols=43 wrap=virtual></textarea>
</form>
.....
Soweit nochmals Danke für die schnellen Reaktionen,
Stefen