当数值步进器的值超出范围时显示错误答案

【问题标题】：Show error when value of numeric stepper out of range当数值步进器的值超出范围时显示错误
【发布时间】：2017-02-24 03:06:31
【问题描述】：

当我为数字步进器设置最大值和最小值时，我仍然可以输入超出该范围的数字。但是如果我输入一个大于那个的数字，它会自动接收最大值。如何在这种情况下显示错误，但仍保持设置的最大值和最小值？

【问题讨论】：

标签： actionscript-3 apache-flex

【解决方案1】：

当用户从NumericStepper 的text input 中按ENTER 键或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>

【讨论】：

【解决方案2】：

嗯，一个直观的方法来检查输入的值与 NumericStepper 组件的 maximum 和 minimum 值 - 虽然它仍在输入，但将在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);

【讨论】：

我找不到数字步进器的 textField 属性

【解决方案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!");
            }
        });

【讨论】：