Bild über Cursor oder Bild in Textfeld

[mOfl]

Brüderinnen und Brüder,

ich habe mir eine schnuckelige kleine Seite gezimmert, bei der ich momentan nicht mehr so recht weiterkomme. Die Navigation läuft komplett über Texteingaben in ein Textfeld, welche über Funktionen dann verschiedene Inhalte aufrufen - das ganze ist im Stil einer Monochrom-Eingabeaufforderung gehalten.

Wie ihr euch denken könnt macht sich da der Standard-Text-Cursor (Caret), also das schwarze, blinkende |, nicht gut in dem Textfeld. Deshalb habe ich einen Blockcaret der alten Schule (http://home.arcor.de/siebenzwiebeln/cursor.gif) gemacht, den ich stattdessen gerne verwenden würde.

Da der Text-Cursor, so viel hab ich schon rausgefunden, kein ansprechbares Element im Browser ist, kann ich ihn wohl nicht ersetzen, leider. Also muss ich irgendwie tricksen, weiß aber nicht so recht, wie. Meine Ansätze:

1. Ich setze meinen cursor.gif als absolut in die Seite. Danach wird zu jeder Zeit die Position des Text-Cursors abgerufen und an diese Position mein Cursor drübergesetzt. Wie man die Position abrufen kann, weiß ich nicht, ich stelle es mir aber schwer vor.

2. Das wäre vermutlich einfacher (oder unmöglich): Der cursor.gif wird in das Textfeld eingebunden. Geht das, ein Bild in ein Textfeld einbinden? Dann würde sich das Bild ja automatisch immer dahin mitverschieben, wohin der Text es drückt, sei es Backspace, Eingabe oder neue Zeile.
   Wenn das nicht funktioniert, könnte man es vielleicht über das Hintergrundbild des Textfeldes realisieren? Problem hierbei wäre eben, wie man den cursor.gif innerhalb der Zeile bewegen kann... :/

3. Da habe ich auch überhaupt keine Ahnung, ob das funktioniert: statt dem cursor.gif nimmt man ein Sonderzeichen, dass wie dieser Block aussieht. So könnte man es (leichter) ins Textfeld einbinden. Das müsste man - im Textfeld - über ein Script immer die Farben schwarz und grün wechseln lassen. Dann sollte dieses Zeichen immer dahin hüpfen, wo sich gerade der Text-Cursor befindet und sollte dazu nicht löschbar sein...

Puh :/ ist es ausweglos? Oder hat einer eine andere Idee, wie ich mich des Cursors entledigen kann? Html, JavaScript, ich bin für alles dankbar. Nur ersetzen kann ich das Textfeld eben nicht, denn durch die Eingaben wird die Seite ja gesteuert...

Grüße
Dani

[wucher wichtel]

Hallo!

Suchst du das?

ciao, ww

[mOfl]

Hallo!

Suchst du das?

ciao, ww

huhu und danke für die Antwort, aber nein, das ist nicht, was ich suche. Ich suche eben gerade nichts für den Mauscursor, sondern Textcursor (wer hat sich denn den Quatsch ausgedacht, dass beides Cursor heißt?), für den so genannten Caret, also das blinkende Ding, das immer zeigt, wo man gerade ist, wenn man einen Text schreibt. Das war früher halt kein blinkender schwarzer Strich, sondern ein blinkender grüner Block, und das würde ich gerne imitieren...

[wucher wichtel]

Hallo!

huhu und danke für die Antwort, aber nein, das ist nicht, was ich suche. Ich suche eben gerade nichts für den Mauscursor, sondern Textcursor (wer hat sich denn den Quatsch ausgedacht, dass beides Cursor heißt?), für den so genannten Caret, also das blinkende Ding, das immer zeigt, wo man gerade ist, wenn man einen Text schreibt. Das war früher halt kein blinkender schwarzer Strich, sondern ein blinkender grüner Block, und das würde ich gerne imitieren...

Aaaah, ok :) Jetzt habe ich es verstanden. Ne sorry, da weiß ich auch nichts. Würde mich aber auch interessieren.

ciao, ww

[mOfl]

Damit das ganze (hoffentlich) klarer wird, hier meine Seite: http://www.mOfl.eu

da in der untersten Zeile, wo man den Befehl reinschreibt, da blinkt eben der normale Windows-Cursor - ihr seht ja selbst, dass das nicht so richtig reinpasst :/

[lightfly]

Hi

huhu und danke für die Antwort, aber nein, das ist nicht, was ich suche. Ich suche eben gerade nichts für den Mauscursor, sondern Textcursor (wer hat sich denn den Quatsch ausgedacht, dass beides Cursor heißt?), für den so genannten Caret, also das blinkende Ding, das immer zeigt, wo man gerade ist, wenn man einen Text schreibt. Das war früher halt kein blinkender schwarzer Strich, sondern ein blinkender grüner Block, und das würde ich gerne imitieren...

Deine Idee ist ausgesprochen Originel! :)

Wenn du eine Schrift mit fixer Breite verwendest und du die Schriftgrösse fixierst, kannst du herausfinden wo sich der Cursor befinden müsste: Zeichenbreite * Anzahl Zeichen. Somit könntest du bei jeder Eingabe ein absolut positioniertes Div (oder ein animiertes GIF) an die richtige Position verschieben.

gruss

[Detlef G.]

Hallo lightfly

Wenn du eine Schrift mit fixer Breite verwendest und du die Schriftgrösse fixierst, kannst du herausfinden wo sich der Cursor befinden müsste: Zeichenbreite * Anzahl Zeichen. Somit könntest du bei jeder Eingabe ein absolut positioniertes Div (oder ein animiertes GIF) an die richtige Position verschieben.

Ein absolut positioniertes Element wäre dafür aufwändig und auch unnötig.

input {
  background: #000 url(http://home.arcor.de/siebenzwiebeln/cursor.gif) no-repeat;
}

Das reicht schon, um den Cursor anzuzeigen. Der passende Wert für background-position müsste dann anhand der Zeichenanzahl im Input mittels Javascript berechnet und gesetzt werden.

An dieser relativ einfachen Lösung stören mich ein paar Dinge.

Die genaue Position an der der Blockcursor angezeigt werden muss ist von der beim User istallierten Schrift abhängig (verschiedene Schriften haben eventuell auch verschiedene Buchstabenbreiten) und von der von ihm gewählten Schriftgröße (OK, dies ließe sich durch angaben in em ausgleichen)
Es wäre also wohl erforderlich, die vom User verwendet Schrift auszumessen, was die Sache dann doch wieder aufwändiger machen würde.

Der originale Textcursor wirkt dabei störend.

Wenn ich irgendwo auf die Seite klicke, bleibt der Blockcursor, ohne dass eine weitere Eingabe möglich ist. (Vielleicht sollte der Blockcursor nur eingeblendet werden, wenn input den Fokus hat, oder das Verlassen des input verhindert werden.)

Auf Wiederlesen
Detlef