LoginSignup
5
3

More than 1 year has passed since last update.

Power Apps で TextInput のデフォルトの文字を選択時に消す方法

Posted at

向井です。
社内で質問があったのでこちらにもメモしておきます。

本記事の内容

Power Apps のテキスト入力(TextInput)のDefaultには「テキスト入力」という文字が入力されています。(この文字列はもちろん変更可能です。)
image.png

ユーザーがこのTextInputに文字を入力しようとする時、デフォルトではこの「テキスト入力」という文字列を削除してから入力したい内容を入力しなくてはいけません。

ユーザーがTextInputに文字を入力しようとしたとき、このデフォルトの文字を消すように設定できないのかという質問がありましたので回答します。

方法は大きく二つあります。

1. ユーザーがTextInputを選択したときにDefaultに入っている文字を消す方法

質問に直球で答えるならこの方法です。
先に書いておくとこの方法は最適解ではないと思うので、もっと簡単・最適な方法を知りたい方は読み飛ばしてください。

ScreenのOnVisibleにUpdateContext({ mainText: "テキスト入力" } )と入力します。
image.png

TextInputのDefaultにmainTextと入力します。
image.png

TextInputのOnSelectにUpdateContext({ mainText: "テキスト入力" } )と入力します。
image.png

完成です。

※テストをするときはいったん他のScreenからNavigateによって該当のスクリーンに移動するようにしてみてください。

この方法はもちろんSet関数でも実現可能ですが、UpdateContext関数を使うとそのスクリーンの中だけで有効な変数を作成できます。

※この方法はこちらの記事を和訳しまとめ直したものです。

2. HintText を使う

私的にはこちらの方法の方がスマートだと思います。

まず、TextInputのDefaultを空欄にします。
image.png

次に、TextInputのHintTextに"テキスト入力"と入力します。
image.png

完成です。とても簡単です。

しかも、この方法では、ユーザーがTextInputをクリックすると文字列が消えますが、
文字を入力せずに他の場所をクリックすると、また文字列が表示されます。
image.png

クリック

image.png

何も入力せずに他のところをクリック

image.png

対して1の方法ですと、一度消えてしまった文字列は再度Screenを表示し直さない限り戻ってきません。。

簡単さ、利便性の観点からも2のHintTextを使用する方法がおすすめです。

5
3
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
5
3