Flex Mobile 在移动设备应用程序中使用软键盘

可使用三种方法在移动设备应用程序中打开软键盘：

将焦点放在具有?TextInput?或?TextArea?之类文本输入控件的控件上
• 将控件的?needsSoftKeyboard?属性设置为?true，并将焦点放在该控件上

• 对控件调用?requestSoftKeyboard()?方法（不在 iOS 上）

用户将焦点移动到不接收文本输入的控件。当用户手动指向另一个文本输入控件，或者用户按键盘上的返回键，应用程序随之将焦点移到另一个控件时就会发生这种情况。

如果焦点移动到其他文本输入控件，或移动到?needsSoftKeyboard?属性为?true?的控件，则键盘保持打开状态。

• 用户按下设备上的后退按钮以取消输入。

• 您可通过编程将焦点更改到非交互式控件或将?stage.focus?设置为?null。

要使用基于 TextField 的外观，请将文本输入控件的? skinClass?属性设置为指向? TextInputSkin?和? TextAreaSkin?类。例如：

<s:TextInput skinClass="spark.skins.mobile.TextInputSkin"/> 
<s:TextArea skinClass="spark.skins.mobile.TextAreaSkin"/>

在下例中，当用户在软键盘上按“Next”键时，焦点将从一个字段更改到下一个字段。

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_keyboard/views/UseNextLikeTab.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Change Focus">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g.,value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10"/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
            private function changeField(ti:TextInput):void {
                // Before changing focus to a new control,set the stage's focus to null:
                stage.focus = null;
                
                // Set focus on the TextInput that was passed in:
                ti.setFocus();
            }
        ]]>
    </fx:Script>
    
    <s:HGroup>
        <s:Label text="1:" paddingTop="15"/>
        <s:TextInput id="ti1" prompt="First Name"
                     width="80%"
                     returnKeyLabel="next" 
                     enter="changeField(ti2)"/>     
    </s:HGroup>
    <s:HGroup>
        <s:Label text="2:" paddingTop="15"/>
        <s:TextInput id="ti2" prompt="Middle Initial" 
                     width="80%"
                     returnKeyLabel="next" 
                     enter="changeField(ti3)"/>
    </s:HGroup>
    <s:HGroup>
        <s:Label text="3:" paddingTop="15"/>
        <s:TextInput id="ti3" prompt="Last Name" 
                     width="80%"
                     returnKeyLabel="next" 
                     enter="changeField(ti1)"/>
    </s:HGroup>
    
</s:View>

下例显示了最后一个按下的按键的字符代码：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_keyboard/views/CompareMobileKeyPresses.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Keyboard Events">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g.,value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <fx:Script>
        <![CDATA[
            private var storedValueOfText:String = null;
            
            // Compare the new text against the stored value to see what key was pressed.
            private function compareKey(e:Event):void {
                var key:String = "";
                if (storedValueOfText == null) {
                    key = ti1.text.charCodeAt(0).toString(); // Capture the first key pressed.                  
                } else {
                    // Compare the stored value against the current value and extract the difference.
                    for (var i:int = 0; i<ti1.text.length; i++) {
                        if (ti1.text.charAt(i) == storedValueOfText.charAt(i)) {
                            // Do nothing if they're equal.
                        } else {                            
                            key = ti1.text.charCodeAt(i).toString();
                        }
                    }
                }
                ti2.text = "The '" + key + "' key was pressed.";
                storedValueOfText = ti1.text;
            }
        ]]>
    </fx:Script>
    
    <s:TextInput id="ti1" change="compareKey(event)"/>
    <s:TextInput id="ti2" editable="false"/>

</s:View>

当用户与基于 TextField 控件的软键盘进行交互时，像? keyUp?和? keyDown?这样的事件将适用于所有按键。下例使用? keyUp?处理函数来获取当前按键，并基于按键代码对 Label 控件应用样式。因为? requestSoftKeyboard()?方法会为 Label 控件而不是 TextInput 或 TextArea 控件启用键盘，应用程序将使用基于 TextField 的键盘。

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/views/RequestSoftKeyboardExample.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="requestSoftKeyboard()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g.,value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/> 
    </s:layout>
    
    <fx:Script>
        <![CDATA[
            private function handleButtonClick():void {
                myLabel.requestSoftKeyboard();              
            }
            /* Ok to use keyUp handler on limited screen keyboard. */
            private function handleKeys(event:KeyboardEvent):void {
                var c:int;
                switch(event.keyCode) {
                    case(82): // 82 = "r"                       
                        c = 0xFF0000;
                        break;
                    case(71): // 71 = "g"
                        c = 0x00FF00;
                        break;                      
                    case(66): // 66 = "b"
                        c = 0x0000FF;
                        break;
                }
                event.currentTarget.setStyle("color",c);
            }
        ]]>
    </fx:Script>
    <s:Label id="myLabel" text="This is a label." needsSoftKeyboard="true" keyUp="handleKeys(event)"/>
    <s:Button id="b1" label="Click Me" click="handleButtonClick()"/>
    
</s:View>

可通过事件处理函数访问软键盘的某些属性。要访问软键盘的大小和位置，请使用? flash.display.Stage?类的? softKeyboardRect?属性，如下例所示：

<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_keyboard/views/SoftKeyboardEvents.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Soft Keyboard Events">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g.,value objects) here -->
    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/> 
    </s:layout>
    
    <s:TextInput prompt="Enter your text"
             softKeyboardActivate="ta1.text+=stage.softKeyboardRect + 'n'"
             softKeyboardDeactivate="ta1.text+=stage.softKeyboardRect + 'n'"
             softKeyboardActivating="ta1.text+=stage.softKeyboardRect + 'n'"/> 

    <s:TextArea id="ta1" width="100%" height="100%" editable="false"/>
    
</s:View>

下面的示例中显示的是带有多个 TextInput 控件和一个 Scroller 组件的 View 容器。

<?xml version="1.0" encoding="utf-8"?> 
<!-- containersmobileviewsSparkMobileKeyboardHomeView.mxml --> 
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        title="Compose Email"> 
    
    <s:Scroller width="100%" top="10" bottom="50"> 
        <s:VGroup paddingTop="3" paddingLeft="5" paddingRight="5" paddingBottom="3"> 
            <!-- Use TextField-based skins so that scrolling works. -->
            <s:TextInput prompt="To" width="100%" skinClass="spark.skins.mobile.TextInputSkin"/> 
            <s:TextInput prompt="CC" width="100%" skinClass="spark.skins.mobile.TextInputSkin"/> 
            <s:TextInput prompt="Subject" width="100%" skinClass="spark.skins.mobile.TextInputSkin"/> 
            <s:TextArea height="400" width="100%" prompt="Compose Mail" skinClass="spark.skins.mobile.TextAreaSkin"/> 
        </s:VGroup> 
    </s:Scroller> 
    
    <s:HGroup width="100%" gap="20" 
              bottom="5" horizontalAlign="left"> 
        <s:Button label="Send" height="40"/> 
        <s:Button label="Cancel" height="40"/> 
    </s:HGroup>
    
</s:View>

下例中显示的是一个应用程序的主应用程序文件，该应用程序通过将? resizeForSoftKeyboard?属性设置为? true?来允许调整应用程序大小。

<?xml version="1.0" encoding="utf-8"?>
<!-- containersmobileSparkMobileKeyboard.mxml -->
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    firstView="views.SparkMobileKeyboardHomeView"
    resizeForSoftKeyboard="true">
 
</s:ViewNavigatorApplication>

moveForSoftKeyboard?

如果为默认值? true，弹出窗口将在键盘打开时移至键盘上方。

resizeForSoftKeyboard?

true，弹出窗口将在键盘打开时调整大小以适合键盘上方的可用空间。

如果应用程序需要自动调整大小，请置入交互式组件，这样，当在对其操作时，软键盘可见性的变化便不会导致其从用户手指的位置移开。要做到这一点，需要以下技术：

不要为按钮、复选框或其他较小目标组件设置下约束，也不要将这些组件放置在设置了百分比高度的其他组件下方。
• 尝试将布局设计为当显示或隐藏键盘时最底层组件的顶部保持固定。

• 对于内置功能不能实现隐藏软键盘的平台，请提供一个固定的 UI 元素来实现该操作。这可以是专用于隐藏软键盘的按钮，也可以仅仅是足够大的固定空白边缘（可以轻敲该边缘以将焦点从文本组件移开）。

• 不要垂直排列可能会移动的组件。这么做可能导致在软键盘的可见性发生变化时手势定位到错误的目标。