1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【SAPUI5】Inputにてfocusアウト時にカンマ付き数値に変換

Last updated at Posted at 2020-07-03

##はじめに
sap.ui.core.format.NumberFormatを使用し、数値をカンマ付き数値に変換する方法を紹介します。
この例ではInputの入力内容変更時にカンマつけの処理が実装されるようにしています。

##NumberFormatを使ってみる
###1. "sap/ui/core/format/NumberFormat"を読み込み

NumberFormat.controller.js
sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/core/format/NumberFormat"
], function (Controller, NumberFormat) {

###2. oIntNumberFormatを定義

NumberFormat.controller.js

	var oIntNumberFormat = NumberFormat.getIntegerInstance({
		maxFractionDigits: 0,
		groupingEnabled: true
	}, sap.ui.getCore().getConfiguration().getLocale());

###3. ファンクションを定義

NumberFormat.controller.js
	intformat: function (value) {
			return oIntNumberFormat.format(value);
	}

###4. ファンクションを呼び出し

NumberFormat.view.xml
	<Input id="input" change="onChange" width="15rem"/>
NumberFormat.controller.js
	onChange: function() {
			// Inputボックスの入力内容を取得
			var text = this.getView().byId("input").getValue();
			// カンマつけして画面へ再設定
			this.getView().byId("input").setValue(this.intformat(text));
		}

##実行結果
下記のように、フォーカスアウト時に、カンマ付き数値に変換することができました。
今回の例では、数値以外を入力することはありませんでしたが、数値以外の文字列が入力される
可能性がある場合は考慮が必要となります。

image.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?