パスワードを表示・非表示に切り替える方法

Last updated at 2020-12-09Posted at 2020-12-09

はじめに

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

一方で、マスクしない方が良いのではないかという説もあります。
「パスワードを隠すのをやめよう ( 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 = "パスワードを表示";
    }
  },
});