Ge0rgy: Position des cursors innerhalb einer inputbox bestimmen?

SELF-Forum

Position des cursors innerhalb einer inputbox bestimmen?

Ge0rgy
– Informationen zu den Bewertungsregeln

Hallo allerseits,

Ich hab ein kleines Problem, und zwar hab ich eine Webseite mit einer tabelle mit beliebig vielen Zeilen (asp.net, zeilen kommen aus DB)
wovon mehere Spalten mit Inputboxen befüllt sind. Hier soll der benutzer Umsätze eingeben. (das ganze ist eine Extranet-Anwedung mit Konvention IE7 only)

Nun soll der user durch die Boxen mit pfeiltasten navidieren können.
Das funktioniert auch schon mit pfeil-hoch und pfeil-runter, nur ist mein Dilemma mit links und rechts Pfeilen.
Denn die sollen innerhalb der inputbox "normal" funktionieren, also um Stellenweise durch die Zahl zu navigieren, wenn aber der Cursor hinter der letzten Ziffer ist und nochmal Pfeil-rechts gedrückt wird, soll der cursor in die rechts daneben liegende inputbox springen.
Analog natürlich für pfeil-links, wenn der cursor am "anfang" des texts in der inputbox steht.
Wie ich keyCode abfrage und die Boxen ansteuere weiß ich. (klappt ja auch mit hoch/runter) mein Problem ist, wie finde ich raus ob der cursor grade am ende oder am anfang der input steht!? - denn nur in diesen Fällen will ich ja die inputbox wechseln. Wenn der User nur irgendwo zwischen den Ziffern navigiert, würde ich das event einfach hochbubbeln lassen...

Hab schon mehrfach google befragt, aber die meisten treffer beschäftigten sich mit dem anhängen von text am ende der textbox oder die direkte Positionierung des cursors, wie ich die akt. position herauskriege hab ich noch nicht gefunden..!?

Weiß da irgendjemand Rat!?
Danke schonmal

Gruß,
Ge0rgy

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Position des cursors innerhalb einer inputbox bestimmen?

    molily Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Schnellschuss mit TextRanges und compareEndPoints:

    <!DOCTYPE html>  
<html>  
<head><title>Cursor am Anfang/Ende eines Eingabefeldes?</title>  
</head>  
<body>  
  
<input id="i" value="blablabla">  
  
<script>  
[code lang=javascript]document.getElementById('i').onkeydown = function () {  
	var keyCode = window.event.keyCode;  
	var r1 = document.selection.createRange();  
	var r2 = r1.duplicate();  
	r2.expand('textedit');  
	var cursorAtStart = r2.compareEndPoints('StartToStart', r1) == 0;  
	var cursorAtEnd = r2.compareEndPoints('EndToEnd', r1) == 0;  
	if (keyCode == 37 && cursorAtStart) {  
		console.log('springe zu vorherigem');  
	} else if (keyCode == 39 && cursorAtEnd) {  
		console.log('springe zu nächstem');  
	}  
};

    </script>

    </body>
    </html>[/code]

    Mathias

    --
    JavaScript-Erweiterung für das SELFHTML-Forum
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Position des cursors innerhalb einer inputbox bestimmen?

      Ge0rgy
      – Informationen zu den Bewertungsregeln

      Danke, das funktioniert im wesentlichen, nur kann man den cursor nun nicht mehr ganz links von einer zahl positionieren (zumindest nicht mit pfeiltasten) weil das sofotz den switch auslöst.
      eigentlich sollte man ja jede position im textfeld mit dne pfeiltasten anwählen können, nur wenn man ganz links noch einmal pfeiltaste drückt sollte zurvorherigen box gesprungen werden, analos natürlich rechts mit der letzten box...
      mal schauen ob ich mir die funktion noch zusammenfummeln kann... wäre natürlich trotzdem toll wenn jemand auf basis dieses codes eine paradelösung dafür wüsste ;)
      grüßchen
      Ich

      Schnellschuss mit TextRanges und compareEndPoints:

      <!DOCTYPE html>

      <html>
      <head><title>Cursor am Anfang/Ende eines Eingabefeldes?</title>
      </head>
      <body>

      <input id="i" value="blablabla">

      <script>
      [code lang=javascript]document.getElementById('i').onkeydown = function () {
      var keyCode = window.event.keyCode;
      var r1 = document.selection.createRange();
      var r2 = r1.duplicate();
      r2.expand('textedit');
      var cursorAtStart = r2.compareEndPoints('StartToStart', r1) == 0;
      var cursorAtEnd = r2.compareEndPoints('EndToEnd', r1) == 0;
      if (keyCode == 37 && cursorAtStart) {
      console.log('springe zu vorherigem');
      } else if (keyCode == 39 && cursorAtEnd) {
      console.log('springe zu nächstem');
      }
      };

      
> </script>  
>   
> </body>  
> </html>[/code]  
>   
> Mathias
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Position des cursors innerhalb einer inputbox bestimmen?

        molily Homepage des Autors
        – Informationen zu den Bewertungsregeln

        nur kann man den cursor nun nicht mehr ganz links von einer zahl positionieren (zumindest nicht mit pfeiltasten) weil das sofotz den switch auslöst.

        Das kann ich nicht nachvollziehen. Wenn der Cursor hier steht:

        [b|lablabla]

        Und ich die linke Pfeiltaste drücke, dann springt er dorthin:

        [|blablabla]

        ohne dass der Sprung zum vorherigen Feld ausgelöst wird.

        Erst wenn ich bei [|blablabla] nochmal die Taste drücke, springt er.

        Das liegt daran, dass der Cursorsprung erst nach dem keydown-Ereignis passiert. D.h. wenn der Cursor hier steht [b|lablabla] und man die linke Pfeiltaste drückt, dann wird nicht [|blablabla], sondern [b|lablabla] als Position verwendet, um zu berechnen, ob der Cursor bereits am Anfang steht.

        eigentlich sollte man ja jede position im textfeld mit dne pfeiltasten anwählen können

        Ich sehe nicht, dass das in der Beispiellösung nicht ginge?
        Hast du sie vollständig und korrekt übernommen?

        Mathias

        --
        JavaScript-Erweiterung für das SELFHTML-Forum
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln