Flex TextInputで数値のみ入力できてカンマ区切りにするサンプル

完成図はこんな感じになります。

TextInput の restrict プロパティを使うことで、ユーザーの入力を制限することができます。今回は数値のみなので、restrict = "^a-zA-Z-u0009" とします。さらに、imeMode = "ALPHANUMERIC_HALF"; と、IME.enabled = false; も設定し、全角文字の入力ができないように制限します。

TextInput クラスを継承した　NumericTextInput を用意しました。

package
{
  import flash.events.Event;
  import flash.events.FocusEvent;
  import flash.events.KeyboardEvent;
  import flash.events.MouseEvent;
  import flash.system.IME;

  import mx.controls.TextInput;
  import mx.formatters.NumberFormatter;

  /**
   * TextInput for Numeric input.
   */
  public class NumericTextInput extends TextInput
  {
    /**
     * クリック時、初回のみ選択状態にする
     */
    private var firstClickFlg:Boolean = true;

    /**
     * コンストラクタ
     */
    public function NumericTextInput()
    {
      super();
      // 入力キーの制御
      this.restrict = "^a-zA-Z-u0009";
      // テキストを選択状態に設定
      this.addEventListener(MouseEvent.CLICK, function(event:Event):void {
        if ( event.currentTarget.text != "" && event.currentTarget.text != undefined ) {
          // 初回のみ選択状態を作る
          if ( this.firstClickFlg )
            event.currentTarget.setSelection(0, event.currentTarget.length);
          this.firstClickFlg = false;
        }
      });
    }

    /**
     * 小数点以下の表示設定
     */
    private var _precision:int = 0;

    public function set precision(precision:int):void {
      this._precision = precision;
    }

    public function get precision():int {
      return this._precision;
    }

    /**
     *  @private
     *  Gets called by internal field so we draw a focus rect around us.
     */
    override protected function focusInHandler(event:FocusEvent):void {
      super.focusInHandler(event);
      // カンマ区切りを解除
      if ( event.currentTarget.text != "" )
        event.currentTarget.text = Number(this.text.replace(new RegExp(",", "g"), "")).toString();
      // テキストを選択状態に設定
      if ( event.currentTarget.text != "" && event.currentTarget.text != undefined )
        event.currentTarget.setSelection(0, event.currentTarget.length);
      this.firstClickFlg = false;
    }

    /**
     *  @private
     */
    override protected function keyDownHandler(event:KeyboardEvent):void {
      super.keyDownHandler(event);
      this.imeMode = "ALPHANUMERIC_HALF";
      IME.enabled = false;
    }

    /**
     *  @private
     *  Gets called by internal field so we remove focus rect.
     */
    override protected function focusOutHandler(event:FocusEvent):void {
      super.focusOutHandler(event);
      if ( event.currentTarget.text != "" ) {
        var nf:NumberFormatter = new NumberFormatter();
        nf.useThousandsSeparator = true;
        // 小数点以下の設定
        nf.precision = _precision;
        // マイナスの表示許可
        nf.useNegativeSign = true;
        event.currentTarget.text = nf.format(event.currentTarget.text);
      }
      this.firstClickFlg = true;
    }
  }
}

restrict = "^a-zA-Z-u0009" を記述し、入力を制限します。

以前「Flex クリックやフォーカスイン時にTextInputのテキストを選択状態にするサンプル」でもご紹介しましたが、マウスでクリックされたときに、入力値がある場合は、選択状態を作りたかったので、setSelection を使って、テキストを選択状態にしています。

小数点の表示桁数は、外部から設定させたかったので、precision プロパティを用意しています。デフォルトは 0 (小数点以下表示なし)です。

ここでは、次の入力がしやすいように、入力値のカンマ区切りを解除しています。また、こちらもテキストを選択状態にしています。

this.imeMode = "ALPHANUMERIC_HALF"; と、IME.enabled = false; を設定し、全角文字の入力制御をしています。

ここでは、NumberFormatter.useThousandsSeparator を利用して、3ケタのカンマ区切りをしています。マイナス入力も許可するために、useNegativeSign = true; に設定しています。

表示する画面は以下の通りです。画面デザインを整えるために、css を用意しています。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:mx="library://ns.adobe.com/flex/mx"
             xmlns:local="*"
             initialize="onInit()"
             width="600"
             height="80"
             >
  <fx:Script>
    <![CDATA[
      /**
       * 初期化
       */
      protected function onInit():void {
        StyleManager.getStyleManager(null).loadStyleDeclarations("css/blue.swf");
      }
    ]]>
  </fx:Script>
  <fx:Declarations>
  </fx:Declarations>

  <mx:VBox width="100%">
    <mx:FormItem width="100%" label="数値入力">
      <s:HGroup width="100%" gap="0">
        <local:NumericTextInput id="numericTest" precision="2" width="100" textAlign="right" />
        <mx:Text text="数値のみ入力できます。フォーカスを移動すると、[###,0.##]で表示されます。"/>
      </s:HGroup>
    </mx:FormItem>
    <mx:FormItem width="100%" label="文字列入力">
      <s:HGroup width="100%" gap="0">
        <mx:TextInput id="stringText" width="100" imeMode="JAPANESE_HIRAGANA" />
        <mx:Text text="通常の TextInput を利用しています。"/>
      </s:HGroup>
    </mx:FormItem>
  </mx:VBox>

</s:Application>

サンプルソースは こちら からダウンロードできます。