最近做的Flex项目，客户需要Flex做出来的UI能像Excel一样全键盘操作，除了Tab加Enter之外，特别需要能够支持四个方向键的操作支持，就像是Excel一样，当单元格中的文字处于全选状态的时候可以通过方向键进行导航。
上图是我做的例子截图，这个例子中，上面6个是TextInput，下面是可编辑的DataGrid。
当光标选中第一个textinput的时候，我们让它自动选择全部文字，通过setSelection（）函数来实现，之后点击键盘的右方向键（KeyBoard.RIGHT）时，焦点会到第二个input中，一次类推，一直到input6的时候，再按右方向键会跳到DataGrid的第一个可编辑单元。
另外还支持了其他3个方向键的操作（KeyBoard.LEFT, KeyBoard.UP, KeyBoard.DOWN).
这里附上程序代码，希望能对大家有所帮助。但有一点需要说明的是，这里的6个TextInput控件之间的顺序是我硬编码的，可扩展性差，如果碰到输入控件数量不定或者位置不定，那就需要自己动手写个灵活的控制器了。这里仅提供一个可行性参考。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" pageTitle="Hotkey demo for Navigation keyboard" layout="absolute">
<mx:Script>
<![CDATA[
import flash.events.*;
import mx.managers.FocusManager;
[Bindable]
private var dp:Array = [{ssn:"123-123-1234",firstName:"John",lastName:"Doe",address:"San Francisco",zip:"98765"},
{ssn:"789-789-7890",firstName:"Mary",lastName:"Roe",address:"San Francisco",zip:"12345"},
{ssn:"555-222-3434",firstName:"Jack",lastName:"Chaw",address:"Newton",zip:"02135"},
{ssn:"555-883-6666",firstName:"Nick",lastName:"Ted",address:"Boston",zip:"66666"}];
public function onFocusInput(event:FocusEvent):void {
var comp:TextInput = event.currentTarget as TextInput;
comp.setSelection(0, String(event.target.text).length);
}
private function handleKeyDown_dg(event:KeyboardEvent):void
{
//get the datagrid's current edit item position
var v:Object = dg.editedItemPosition;
//get the instance editor of datagrid
var ti:TextInput = TextInput(dg.itemEditorInstance);
//according to the keydow to navigate next item
if(event.keyCode == Keyboard.DOWN){
if(v.rowIndex < dg.dataProvider.length -1){
v.rowIndex++;
dg.editedItemPosition = v;
}
else
event.preventDefault();
}else if(event.keyCode == Keyboard.UP){
if(v.rowIndex > 0){
v.rowIndex --;
dg.editedItemPosition = v;
}else
input6.setFocus();
}
if(event.keyCode == Keyboard.LEFT){
if(ti.selectionBeginIndex == 0 && ti.selectionEndIndex == ti.text.length){
if(v.columnIndex > 0)
v.columnIndex --;
}
dg.editedItemPosition = v;
}else if(event.keyCode == Keyboard.RIGHT){
if(v.columnIndex < dg.columns.length -1 && ti.selectionBeginIndex ==0 && ti.selectionEndIndex == ti.text.length)
v.columnIndex ++;
dg.editedItemPosition = v;
}
}
private function isSelectAll(obj:TextInput):Boolean{
if(obj.selectionBeginIndex == 0 && obj.selectionEndIndex == obj.text.length)
return true
return false;
}
private function handleKeyDown_textinput1(event:KeyboardEvent):void
{
switch(event.keyCode){
case Keyboard.RIGHT :
if(isSelectAll(input1)){
input2.setFocus();
}
break;
case Keyboard.DOWN :
if(isSelectAll(input1)){
input4.setFocus();
}
break;
}
}
private function handleKeyDown_textinput2(event:KeyboardEvent):void
{
switch(event.keyCode){
case Keyboard.LEFT :
if(isSelectAll(input2)){
input1.setFocus();
}
break;
case Keyboard.RIGHT :
if(isSelectAll(input2)){
input3.setFocus();
}
break;
case Keyboard.DOWN :
if(isSelectAll(input2)){
input5.setFocus();
}
break;
}
}
private function handleKeyDown_textinput3(event:KeyboardEvent):void
{
switch(event.keyCode){
case Keyboard.LEFT :
if(isSelectAll(input3)){
input2.setFocus();
}
break;
case Keyboard.RIGHT :
if(isSelectAll(input3)){
input4.setFocus();
}
break;
case Keyboard.DOWN :
if(isSelectAll(input3)){
input6.setFocus();
}
break;
}
}
private function handleKeyDown_textinput4(event:KeyboardEvent):void
{
switch(event.keyCode){
case Keyboard.LEFT :
if(isSelectAll(input4)){
input3.setFocus();
}
break;
case Keyboard.RIGHT :
if(isSelectAll(input4)){
input5.setFocus();
}
break;
case Keyboard.UP :
if(isSelectAll(input4)){
input1.setFocus();
}
break;
}
}
private function handleKeyDown_textinput5(event:KeyboardEvent):void
{
switch(event.keyCode){
case Keyboard.LEFT :
if(isSelectAll(input5)){
input4.setFocus();
}
break;
case Keyboard.RIGHT :
if(isSelectAll(input5)){
input6.setFocus();
}
break;
case Keyboard.UP :
if(isSelectAll(input5)){
input2.setFocus();
}
break;
}
}
private function handleKeyDown_textinput6(event:KeyboardEvent):void
{
switch(event.keyCode){
case Keyboard.LEFT :
if(isSelectAll(input6)){
input5.setFocus();
}
break;
case Keyboard.RIGHT :
if(isSelectAll(input6)){
dg.setFocus();
dg.editedItemPosition={columnIndex:0,rowIndex:0};
}
break;
case Keyboard.UP :
if(isSelectAll(input6)){
input3.setFocus();
}
break;
}
}
]]>
</mx:Script>
<mx:Panel width="100%" height="100%" id="pPanel" title="HotKey Demo(LEFT,RIGHT,UP,DOWN) like Excel">
<mx:Grid >
<mx:GridRow>
<mx:GridItem>
<mx:TextInput id="input1" text="input1" width="120" height="20" textAlign="right" backgroundColor="#eeffdd" keyDown="handleKeyDown_textinput1(event)" focusIn="onFocusInput(event)" />
</mx:GridItem>
<mx:GridItem>
<mx:TextInput id="input2" text="input2" width="120" height="20" textAlign="right" backgroundColor="#eeffdd" keyDown="handleKeyDown_textinput2(event)" focusIn="onFocusInput(event)" />
</mx:GridItem>
<mx:GridItem>
<mx:TextInput id="input3" text="input3" width="120" height="20" textAlign="right" backgroundColor="#eeffdd" keyDown="handleKeyDown_textinput3(event)" focusIn="onFocusInput(event)" />
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:TextInput id="input4" text="input4" width="120" height="20" textAlign="right" backgroundColor="#eeffdd" keyDown="handleKeyDown_textinput4(event)" focusIn="onFocusInput(event)" />
</mx:GridItem>
<mx:GridItem>
<mx:TextInput id="input5" text="input5" width="120" height="20" textAlign="right" backgroundColor="#eeffdd" keyDown="handleKeyDown_textinput5(event)" focusIn="onFocusInput(event)"/>
</mx:GridItem>
<mx:GridItem>
<mx:TextInput id="input6" text="input6" width="120" height="20" textAlign="right" backgroundColor="#eeffdd" keyDown="handleKeyDown_textinput6(event)" focusIn="onFocusInput(event)" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:DataGrid id="dg" selectable="false" width="100%" height="100%" dataProvider="{dp}" keyDown="handleKeyDown_dg(event)" paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0" editable="true" dragEnabled="false" sortableColumns="false" resizableColumns="true" draggableColumns="false" >
<mx:columns>
<mx:DataGridColumn dataField="ssn" headerText="Regional Division" width="270" editable="true"/>
<mx:DataGridColumn dataField="firstName" headerText="firstName" width="120" textAlign="right" editable="true"/>
<mx:DataGridColumn dataField="lastName" headerText="lastName" width="110" textAlign="right" editable="true"/>
<mx:DataGridColumn dataField="address" headerText="address" width="105" textAlign="right" editable="true"/>
<mx:DataGridColumn dataField="zip" headerText="zip" width="105" textAlign="right" editable="true"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
