メインコンテンツへスキップ

パスワード入力制御

  • 更新

!++++

Ver.5　[ 機能を見る ] [ 機能設定を見る ]
Ver.6　[ 機能を見る ] [ 機能設定を見る ]

!----

1. はじめに

本機能では、Client-side JavaScriptを用いることで、テキスト入力項目をパスワード形式に変更し、入力内容を非表示にします。この記事では、サンプル機能の構成と確認ポイントを紹介します。

2. サンプル機能の内容と確認ポイント

本サンプルでは、入力項目に特定のスタイルクラスを指定し、JavaScript により HTML の属性を変更することで、入力内容がマスク表示されるパスワード入力形式を実現します。


設定内容の構成は以下のとおりです。

  1. 対象項目にスタイルクラスを設定する
    　ブロック設定画面の「項目情報」>「STYLE CLASS」において、テキスト入力項目に password を指定します。これにより、スクリプトで対象項目を識別可能になります。

  2. 画面表示時にスクリプトで対象項目を取得する
    　Client-side JavaScriptにより、表示タイミングで指定されたスタイルクラスを持つ項目を取得します。

  3. 入力タイプをパスワード形式に変更する
    　取得した項目の type 属性を "password" に変更します。これにより、入力された内容は画面上でマスク（例：●）表示されます。

🔍 確認いただけるポイント

  • 「パスワード」項目の入力内容がマスク文字（例：●）で表示されること

3. 画面イメージ

以下は、パスワード項目が表示される際に、テキストボックスの入力内容がマスク文字（例：●）で表示される状態を示しています。

 

!++++

使用したコード一覧

•resizeContents_end()

!----