Swing/ShowHidePasswordField のバックアップの現在との差分(No.1)
-
title: JPasswordFieldでパスワードの可視化する
tags: [JPasswordField, JTextField, CardLayout, OverlayLayout]
category: swing
folder: ShowHidePasswordField
title: JPasswordFieldでパスワードを可視化する
tags: [JPasswordField, JCheckBox, JToggleButton, OverlayLayout, CardLayout]
author: aterai
pubdate: 2015-01-05T00:29:05+09:00
description: JPasswordFieldのパスワードを可視化するため、ドキュメントを共有するJTextFieldを作成して、これをCardLayoutで切り替えます。
description: JPasswordFieldに入力したパスワードの表示・非表示を切り替えるためのボタンを作成し、これを入力欄などに配置します。
image:
hreflang:
href: https://java-swing-tips.blogspot.com/2015/01/showhide-passwordfield-using-cardlayout.html lang: en
概要
JPasswordField
のパスワードを可視化するため、ドキュメントを共有するJTextField
を作成して、これをCardLayout
で切り替えます。
概要
JPasswordField
に入力したパスワードの表示・非表示を切り替えるためのボタンを作成し、これを入力欄などに配置します。
Screenshot
Advertisement
Screenshot
Advertisement
サンプルコード
サンプルコード
JPasswordField pf = new JPasswordField(24);
pf.setText("abcdefghijklmn");
#spanadd
pf.setAlignmentX(Component.RIGHT_ALIGNMENT);
#spanend
AbstractDocument doc = (AbstractDocument) pf.getDocument();
doc.setDocumentFilter(new ASCIIOnlyDocumentFilter());
#spandel
JTextField tf = new JTextField(24);
#spanend
#spandel
tf.setFont(FONT);
#spanend
#spandel
tf.enableInputMethods(false);
#spanend
#spandel
tf.setDocument(doc);
#spanend
#spandel
#spanend
#spandel
final CardLayout cardLayout = new CardLayout();
#spanend
#spandel
final JPanel p = new JPanel(cardLayout);
#spanend
#spandel
p.setAlignmentX(Component.RIGHT_ALIGNMENT);
#spanend
#spandel
#spanend
#spandel
p.add(pf, PasswordField.HIDE.toString());
#spanend
#spandel
p.add(tf, PasswordField.SHOW.toString());
#spanend
#spandel
#spanend
AbstractButton b = new JToggleButton(new AbstractAction() {
@Override public void actionPerformed(ActionEvent e) {
AbstractButton c = (AbstractButton) e.getSource();
PasswordField s = c.isSelected() ? PasswordField.SHOW : PasswordField.HIDE;
cardLayout.show(p, s.toString());
pf.setEchoChar(c.isSelected()
? '\u0000'
: (Character) UIManager.get("PasswordField.echoChar"));
}
});
#spandel
View in GitHub: Java, Kotlin解説
- 上:
CardLayout
- 同じ
Document
を使用するJPasswordField
とJTextField
をCardLayout
を設定したJPanel
に配置してJCheckBox
で切り替え -
textField.enableInputMethods(false);
として、インプットメソッドを使用不可に設定
- 同じ
- 中:
CardLayout
+ASCII only filter
- 同じ
Document
を使用するJPasswordField
とJTextField
をCardLayout
を設定したJPanel
に配置してJCheckBox
で切り替え -
textField.enableInputMethods(false);
として、インプットメソッドを使用不可に設定 -
ASCII
以外の文字がコピー・ペーストなどできないようにするDocumentFilter
を作成してDocument
に設定
- 同じ
- 下:
CardLayout
+OverlayLayout
- 同じ
Document
を使用するJPasswordField
とJTextField
をCardLayout
を設定したJPanel
を作成 -
OverlayLayout
を設定したJPanel
に、上記のJPanel
とJToggleButton
を配置し、JPasswordField
などの内部右端にボタンが表示されるように設定
- 同じ
#spanend
#spandel
final CardLayout cardLayout = new CardLayout();
#spanend
#spandel
final JPanel p = new JPanel(cardLayout);
#spanend
#spandel
p.setAlignmentX(Component.RIGHT_ALIGNMENT);
#spanend
#spandel
#spanend
#spandel
p.add(pf, PasswordField.HIDE.toString());
#spanend
#spandel
p.add(tf, PasswordField.SHOW.toString());
#spanend
#spandel
#spanend
#spandel
AbstractButton b = new JToggleButton(new AbstractAction() {
#spanend
//...
#spandel
});
#spanend
b.setFocusable(false);
b.setOpaque(false);
b.setContentAreaFilled(false);
b.setBorder(BorderFactory.createEmptyBorder(0, 0, 0, 4));
b.setAlignmentX(Component.RIGHT_ALIGNMENT);
b.setAlignmentY(Component.CENTER_ALIGNMENT);
#spandel
b.setIcon(new ColorIcon(Color.GREEN));
#spanend
#spandel
b.setRolloverIcon(new ColorIcon(Color.BLUE));
#spanend
#spandel
b.setSelectedIcon(new ColorIcon(Color.RED));
#spanend
#spandel
b.setRolloverSelectedIcon(new ColorIcon(Color.ORANGE));
#spanend
#spanadd
b.setIcon(new EyeIcon(Color.BLUE));
#spanend
#spanadd
b.setRolloverIcon(new EyeIcon(Color.DARK_GRAY));
#spanend
#spanadd
b.setSelectedIcon(new EyeIcon(Color.BLUE));
#spanend
#spanadd
b.setRolloverSelectedIcon(new EyeIcon(Color.BLUE));
#spanend
#spanadd
b.setToolTipText("show/hide passwords");
#spanend
JPanel panel = new JPanel() {
@Override public boolean isOptimizedDrawingEnabled() {
return false;
}
};
panel.setLayout(new OverlayLayout(panel));
panel.add(b);
#spanadd
panel.add(pf);
#spanend
コメント
解説
上記のサンプルでは、JPasswordField#setEchoChar(...)
メソッドの値に\u0000
(0
)を設定して入力したパスワードを可視状態に切り替えるためのボタンを追加しています。
-
BorderLayout + JCheckBox
:-
BorderLayout
でJPasswordField
の下にパスワード表示非表示切り替え用のJCheckBox
を配置
-
-
OverlayLayout + JToggleButton
:-
OverlayLayout
でJPasswordField
内の右端にパスワード表示非表示切り替え用のJToggleButton
を配置 -
JPasswordField
とJToggleButton
を配置するJPanel
にOverlayLayout
を設定し、マウスカーソルでこのレイアウトのz
軸が入れ替わらないようにJPanel#isOptimizedDrawingEnabled()
が常にfalse
を返すようオーバーライド
-
-
CardLayout + JTextField(can copy) + ...
:- 同じ
Document
を使用するJPasswordField
とJTextField
をCardLayout
を設定したJPanel
を作成 -
OverlayLayout
を設定したJPanel
に上記のJPanel
とJToggleButton
を配置し、JPasswordField
などの内部右端にボタンが表示されるように設定 -
JTextField
をそのまま使用しているので表示中の文字列を選択してコピー可能#spanend #spanadd JPasswordField pf3 = new JPasswordField(24); #spanend #spanadd pf3.setText("abcdefghijklmn"); #spanend #spanadd AbstractDocument doc = (AbstractDocument) pf3.getDocument(); #spanend #spanadd JTextField tf3 = new JTextField(24); #spanend #spanadd tf3.setFont(FONT); #spanend #spanadd tf3.enableInputMethods(false); #spanend #spanadd tf3.setDocument(doc); #spanend #spanadd #spanend #spanadd final CardLayout cardLayout = new CardLayout(); #spanend #spanadd final JPanel p3 = new JPanel(cardLayout); #spanend #spanadd p3.setAlignmentX(Component.RIGHT_ALIGNMENT); #spanend #spanadd p3.add(pf3, PasswordField.HIDE.toString()); #spanend #spanadd p3.add(tf3, PasswordField.SHOW.toString()); #spanend #spanadd #spanend #spanadd AbstractButton b3 = new JToggleButton(new AbstractAction() { #spanend @Override public void actionPerformed(ActionEvent e) { AbstractButton c = (AbstractButton) e.getSource(); PasswordField s = c.isSelected() ? PasswordField.SHOW : PasswordField.HIDE; cardLayout.show(p3, s.toString()); } #spanadd }); #spanend #spanadd
- 同じ
-
press and hold down the mouse button
:-
OverlayLayout
でJPasswordField
内の右端にパスワード表示非表示切り替え用のJButton
を配置 - この
JButton
にMouseListener
を追加してマウスでクリックしている間はパスワードを表示するように設定#spanend #spanadd b4.addMouseListener(new MouseAdapter() { #spanend @Override public void mousePressed(MouseEvent e) { pf4.setEchoChar('\u0000'); } @Override public void mouseReleased(MouseEvent e) { pf4.setEchoChar((Character) UIManager.get("PasswordField.echoChar")); } #spanadd }); #spanend #spanadd
-
- -
-
passwordField.setEchoChar((char) 0);
を使用するサンプルを追加- JPasswordField#setEchoChar(...) (Java Platform SE 8)に「値
0
に設定すると標準のJTextField
の動作と同様にテキストが入力したとおりに表示されます。」とあるようにpasswordField.setEchoChar((char) 0);
とすればパスワード文字列の表示が可能 -
CardLayout
を使ってJTextField
を表示する方法は一旦削除したが、表示中のパスワードをコピー可能なので残しておくことにした
- JPasswordField#setEchoChar(...) (Java Platform SE 8)に「値
- ボタンをクリックしている間だけパスワードを表示するサンプルを追加
参考リンク
- JPasswordField#setEchoChar(...) (Java Platform SE 8)
- JPasswordFieldのエコー文字を変更
- JPasswordFieldでPINコード入力欄を作成する