1 Reply Latest reply on Jul 5, 2006 9:50 PM by jpwrunyan

    Long vertical forms that scroll with the tabbing to keep cursor on screen

    Lokesh_Dhakar
      I have a tall vertical form that is roughly 2000px in height. If the user tabs through the fields they will 'fall off' the bottom of the screen. Meaning, the cursor will move to a field out of view but the scrollbar will not nudge down automatically to compensate and keep the cursor in view. Ideally the scrollbars would move with the cursor as they do when tabbing through a traditional html form. Any help is appreciated. Thanks.

      --Lokesh


        • 1. Long vertical forms that scroll with the tabbing to keep cursor on screen
          jpwrunyan Level 1
          I have had to do this very thing myself. Kinda wish it were part of the normal framework...

          anyway, here is an example application that does what you are trying to do:
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

          <mx:Script>
          <![CDATA[
          private function checkPos(target:Object=null):void {
          var yPos:Number = target.y+target.height;
          debug.text = "";
          var shiftAmt:Number = 0;
          if (yPos>cont.verticalScrollPosition+cont.height) {
          shiftAmt = yPos-(cont.verticalScrollPosition+cont.height);
          debug.text+="move down: "+shiftAmt+"\n";
          } else if (yPos<=cont.verticalScrollPosition) {
          shiftAmt = yPos-(cont.verticalScrollPosition+target.height);
          debug.text+="move up: "+shiftAmt+"\n";
          }
          cont.verticalScrollPosition+=shiftAmt;
          debug.text+="yPos: "+yPos+" view space: "+cont.verticalScrollPosition+" - "+(cont.verticalScrollPosition+cont.height);
          }
          ]]>
          </mx:Script>

          <mx:Text id="debug" width="200" height="200" />
          <mx:Canvas id="cont" width="200" height="200">
          <mx:Button label="blorch1" y="0" focusIn="checkPos(event.currentTarget)" height="20" />
          <mx:TextInput focusIn="checkPos(event.currentTarget)" y="100" height="20" />
          <mx:Button label="blorch2" y="200" focusIn="checkPos(event.currentTarget)" height="20" />
          <mx:TextInput focusIn="checkPos(event.currentTarget)" y="300" height="20" />
          <mx:Button label="blorch3" y="400" focusIn="checkPos(event.currentTarget)" height="20" />
          </mx:Canvas>

          </mx:Application>

          If your form has a TON of controls, then you might want to just make a function to automatically attach the listener in actionscript... dunno which is easier. Writing onFocus="blahblah" for each component is a drag but it's simple...

          If there is an easier way to do this, I hope someone will say so because this is how I have to do it and it's not very fun.