当数字步进值超出范围时显示错误

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!");
            }
        });