モダンの「テキスト入力」コントロールについて

この記事の内容は2025年3月4日時点での仕様です。
今後のバージョンアップなどにより変更される可能性があります。
作成バージョンは以下の通りです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/465d6cf7-5371-45b5-a689-a8860303759a.png)

# 使用するには設定変更が必要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/461f0151-64c2-406c-9e17-b32f56c2ff03.png)

設定➤更新➤新規タブの「モダン コントロールとモダン テーマ」をオンにすると使えるようになります。

以下「～コントロール」は省略します。
# 配置
前述の設定を行うと、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/19bc19b6-7f7c-43b0-9131-1bb730a6c7dc.png)
+アイコン➤「入力」から「テキスト入力」を選択した際に、モダンの「テキスト入力」になります。

はじめて配置する際は「TextInputCanvas1」です。
###
▼クラシックの「テキスト入力」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/71ded07e-3da2-41bb-bf7d-c214beb420c4.png)
これまで使用していた「テキスト入力」は、+アイコン➤「クラシック」の中にあります。

## 値の取得
クラシックでは「TextInput1.Text」で入力された値を取得していましたが、
モダンでは「TextInputCanvas1.Value」と、TextではなくValueで取得するため注意が必要です。

# 設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/55e2d2dd-ef3e-41fe-86ad-5d1d2ec18361.png)
「ヒントテキスト」は「PlaceHolder(プレースホルダー)」に変更されていて、何も入力されていないときに表示するテキストはこちらに設定します。

「AccessibleLabel（アクセス可能ラベル）」スクリーンリーダー（読み上げ機能）で読み上げられるテキストです。
###
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/dc7e6ec9-f23d-4769-8f7b-6f13ebf20842.png)
モードからは「パスワード」が無くなって、「単一行」と「複数行」の設定が可能。
###
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/fa5ae8ea-d5c2-4c34-a299-b9b818dcb409.png)

タイプは「Password」「Search」「Text」が設定できます。
###
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/986ddd0d-3abd-4de2-8cd6-bad05c8fe4cd.png)
「Password」にすると入力したテキストが●で表示されるようになります。

正直「Text」と「Search」の違いがよくわかりません。

※クラシックでは「書式」で数値とテキストを選択できましたが、モダンでは数値は「数値入力」を使用してほしいようです。

## 「出力のトリガー(TriggerOutput)」について
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/3cf91ab4-461c-4ff7-89a4-581130b3d708.png)
新しく設定できるようになった「出力のトリガー(TriggerOutput)」
「OnChange」プロパティの実行のタイミングを変更することができます。

### ▼Delayed の挙動
![Delayedの挙動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/60e68b03-0bab-4e54-a73e-c8008ddb4bd4.gif)
・「Delayed」は遅延。入力が止まった時に実行されます。

### ▼Forcus out の挙動 ※初期値
![Focusout挙動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/3d49baba-464d-401e-87f0-83b3d2eb46af.gif)
・「Forcus out」は入力フィールドから別の場所を選択した場合に実行されます。※初期値

### ▼Key press の挙動
![Key pressの挙動.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/e5116fec-e0de-4559-adce-bee27c52872e.gif)
・「Key Press」は入力する度に実行されます。

### この設定の有用性
分かりやすいのは「テキスト入力」の値をギャラリーのフィルターの文字列として使用した場合です。

クラシックでは、入力するた度にギャラリーの表示が変わっていたと思いますが、モダンで「Forcus out」に設定していると、他の場所を選択するまでフィルターが動作しません。
「Forcus out」が初期値なので、初め使用する際は戸惑うと思います。
データ量が多くて読み込みが長い場合に、入力する度に読み込まれるのを回避した場合には便利な機能だと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/304dec7a-24ad-49b4-9690-b893835dca52.png)
私の場合は、このように検索ボタンを配置して、入力後に押してもらうことでフォーカスを移動してギャラリーが更新されるようにしてみました。
もちろん検索ボタン自体には何も設定していません。

「Delayed」はフォーカスを外さなくても、入力を終えたら実行されるので、ある程度読み込みが早い場合は有効ですね。


## 「ValidationState」について
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/fa9874a2-a676-4d40-82a2-985cd3454db2.png)

「詳細設定」の「ValidationState」はエラーの際にテキスト入力の枠を赤くします。
初期値は```"None"```で```"Error"```を設定すると赤くなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/384b8c76-dfe9-4515-b851-766929d028d8.png)
▲画像は```"Error"```を設定して枠が赤くなった状態ですが「罫線」が初期値だと、ほとんど分かりませんね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3880604/f7ace1e9-6ee2-4c6e-a147-fcb85cd0c571.png)
「罫線」の設定で、数値を5にした状態がこちらです。

単体で挿入するとエラー判定を自分で作る必要があるため、あまり使う機会はないかもしれません。
モダンのフォームを配置した際には、自動で設定されます。