目次

はじめに
実装方法
まとめ

はじめに

通常、パスワードの入力欄はショルダーハッキング（覗き見）を防ぐため、
ほとんどのブラウザは入力した値を ● や * などの文字に置換してレンダリングします。

一方で、マスクしない方が良いのではないかという説もあります。
「パスワードを隠すのをやめよう ( https://u-site.jp/alertbox/20090623_passwords )」

そこで、この記事では動的にパスワードを表示/非表示に切り替える方法をご紹介したいと思います。

実装方法

①画面の作成
画面に以下の2つを設置します。

パスワードを入力するためのキーボード：WidgetはTextBox
動的にマスクプロパティを変更するためのボタン：WidgetはButton

このように設置しました。

TextBoxの設定は以下のように設定しました

Mask Text: On
KeyBoard Style:Email
最初にマスクするよう設定しています。

②動的にパスワードを表示/非表示に切り替える
今回は、動的にパスワードを表示/非表示に切り替えたいので、
Button Widgetを選択した状態でアクションメニューを開き、
onClick アクションにアクションを追加していきます。

onClick アクションはボタンをタップする度に呼び出されるアクションです。
その他にもこのようなアクションがあるので、活用してみてください。

アクション名	内容
onClick	ボタンをタップすると呼び出されます
onTouchStart	ボタンを触れた時に呼び出されます
onTouchMove	ボタン上の移動が終了するまで継続的に移動した時に呼び出されます
onTouchEnd	触れていたボタンから離れた時に呼び出されます

では、frmPasswordControllerにonClickアクションを設定していきます。

frmPasswordController.js

define({ 
  // 動的にマスクプロパティを変更
  chengeMaskProperty: function(){
    if(this.view.txtPassword.secureTextEntry){
      this.view.txtPassword.secureTextEntry = false;
      this.view.btnMask.text = "パスワードを非表示";
    }else{
      this.view.txtPassword.secureTextEntry = true;
      this.view.btnMask.text = "パスワードを表示";
    }
  },
});

上について簡単な説明をします。
secureTextEntry：ユーザーが入力したテキストを、●や*などのマスク文字を使用して保護するかどうかを指定します。
trueの場合は保護する、falseの場合は保護しないになります。

Controllerでアクションの作成が完了したら、
onClickのアクションメニューでInvoke Functionを選択し、
chengeMaskPropertyを設定しましょう。

ここまでで、動的にパスワードを表示/非表示に切り替える準備が完了しました。
次に実際にどうなるかみていきましょう！

③実装の確認

pic.twitter.com/XabZOCjhFq
— Kony (@Kony12763790) December 3, 2020

※マスクにしているため、キーボードを入力しているところは表示されておりません。

ボタンを押すとパスワードの表示/非表示になっていることが分かりますね！

まとめ

今回は、TextBox内でパスワードを入力した時に動的にパスワードを表示/非表示に切り替える方法を説明しました。
ログイン画面を作成するとき等使うシーンは多いのではないでしょうか？
Konyでしたら、このように柔軟にマスクプロパティの変更が可能なので便利です
ぜひ試してみてください

参考

Button Widgetの説明:
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/Button_Events.htm#onClick

Button Propertiesの説明:
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/Content/TextBox_Properties.htm

secureTextEntryの説明:
https://docs.kony.com/konyonpremises/Subsystems/Widget_User_Guide/Content/TextBox_Basic_Properties.htm#secureTe