當數字步進值超出范圍時顯示錯誤

Question

當我為數字步進器設置最大值和最小值時，我仍然可以輸入超出該范圍的數字。 但是，如果我輸入一個大於該最大值的數字，它將自動獲得最大值。 在這種情況下如何顯示錯誤，但仍保持設置的最大值和最小值？

Answer 1

好吧，一種檢查NumericStepper組件的最大值和最小值的輸入值的直觀方法-仍在輸入時，將監聽NumericStepper實例的textField屬性上的KEY_UP鍵盤事件：

import fl.controls.NumericStepper;
import flash.events.KeyboardEvent;

var numericStepper:NumericStepper = new NumericStepper();
numericStepper.maximum = 250;
numericStepper.minimum = 3;

numericStepper.textField.addEventListener(KeyboardEvent.KEY_UP, function(e:Event):void {
    var n:Number = Number(numericStepper.textField.text);
    if (n > numericStepper.maximum || n < numericStepper.minimum) {
        trace("Error: Out of Range!");
    }
});
addChild(numericStepper);

Answer 2

當用戶按ENTER鍵或focus out從NumericStepper的text input中focus out ，可以放置邏輯以檢查輸入的數字是否在以下范圍內：

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    import mx.controls.Alert;

    private var isProcessRequiredOnFocusOut:Boolean = true;

    private function addEventListeners():void {
        numericStepper.addEventListener(KeyboardEvent.KEY_DOWN, checkRange, true);
        numericStepper.addEventListener(FocusEvent.FOCUS_OUT, checkRange, true);
    }

    private function checkRange(event:Event):void {
        if (event is KeyboardEvent && (event as KeyboardEvent).keyCode == Keyboard.ENTER) {
            isProcessRequiredOnFocusOut = false;
            processRangeCheck();
        }
        else if (event is FocusEvent && (event as FocusEvent).type == FocusEvent.FOCUS_OUT 
                && isProcessRequiredOnFocusOut) {
            processRangeCheck();
        }
    }

    private function processRangeCheck():void {
        var typedNumber:Number = Number(numericStepper.textDisplay.text);
        if (typedNumber > numericStepper.maximum || typedNumber < numericStepper.minimum) {
            Alert.show("The typed number " + typedNumber + " is out of range.", "Out of Range Warning");
        }
        isProcessRequiredOnFocusOut = true;
    }
    ]]></fx:Script>
<s:Panel title="Show Error message when Typed Number is out of range in Numeric Stepper."
            verticalCenter="0" horizontalCenter="0">
    <s:VGroup paddingTop="10" paddingLeft="10"
              paddingRight="10" paddingBottom="10"
              horizontalAlign="center"
              width="100%">
        <s:Label text="The valid range of Numeric Stepper is 10-20."/>
        <s:NumericStepper id="numericStepper"
                          minimum="10"
                          maximum="20"
                          creationComplete="addEventListeners()"/>
        <s:Button label="Click here to focus out from the Text Input of Numeric Stepper."/>
    </s:VGroup>
</s:Panel>
</s:Application>

Answer 3

使用mx_internal屬性引用NumericStepper的inputField

numericStepper.maximum = 250;
        numericStepper.minimum = 3;

        numericStepper.mx_internal::inputField.addEventListener(KeyboardEvent.KEY_UP, function(e:Event):void {
            var n:Number = Number(numericStepper.mx_internal::inputField.text);
            if (n > numericStepper.maximum || n < numericStepper.minimum) {
                Alert.show("Error: Out of Range!");
            }
        });