JTextField add grayed out text that disappears on focus

Question

I want my created window to have 2 TextFields that are used to input a username and a password. If i create my login-window i want those 2 textFields to have some kind of grayed out text in those textFields to inducate where to put the username and where the password. Is this possible? Just did not find any good answers around the web and I do not want to do it the "shitty" way with the focusGained and focusLost events.

It should look kinda like this for reference:

Code is here:

package com.sociuspugnae.login;

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.border.EmptyBorder;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import javax.swing.SwingConstants;
import javax.swing.GroupLayout;
import javax.swing.GroupLayout.Alignment;
import java.awt.Font;
import javax.swing.border.TitledBorder;
import javax.swing.JTextField;
import java.awt.event.FocusAdapter;
import java.awt.event.FocusEvent;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;

public class LoginWindow extends JFrame {

    private JPanel contentPane;
    private JTextField textFieldUsername;
    private JTextField textFieldPassword;

    /**
     * Create the frame.
     */
    public LoginWindow() {
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(500, 250);
        setLocationRelativeTo(null);
        contentPane = new JPanel();
        contentPane.setBorder(new EmptyBorder(5, 5, 5, 5));
        setContentPane(contentPane);

        JLabel labelName = new JLabel(Main.name);
        labelName.setToolTipText("the program's name");
        labelName.setFont(new Font("Tahoma", Font.PLAIN, 20));
        labelName.setHorizontalAlignment(SwingConstants.CENTER);
        labelName.setBorder(new TitledBorder(null, "v " + Main.version, TitledBorder.LEADING, TitledBorder.TOP, null, null));

        textFieldUsername = new JTextField();
        textFieldUsername.addFocusListener(new FocusAdapter() {
            @Override
            public void focusLost(FocusEvent e) {
                if(textFieldUsername.getText().isEmpty()) {
                    textFieldUsername.setText("Username");
                }
            }
            @Override
            public void focusGained(FocusEvent e) {
                if(textFieldUsername.getText().equals("Username")) {
                    textFieldUsername.setText("");
                }
            }
        });
        textFieldPassword = new JTextField();
        textFieldPassword.setColumns(10);

        JButton buttonLogin = new JButton("Login");
        buttonLogin.addActionListener(new ActionListener() {
            public void actionPerformed(ActionEvent arg0) {
                if(textFieldUsername.getText().equals("Admin") && textFieldPassword.getText().equals("123")) {
                    JOptionPane.showMessageDialog(contentPane, "Login successful!");
                }


            }
        });
        GroupLayout gl_contentPane = new GroupLayout(contentPane);
        gl_contentPane.setHorizontalGroup(
            gl_contentPane.createParallelGroup(Alignment.TRAILING)
                .addGroup(gl_contentPane.createSequentialGroup()
                    .addGap(7)
                    .addComponent(labelName, GroupLayout.DEFAULT_SIZE, 462, Short.MAX_VALUE)
                    .addGap(7))
                .addGroup(gl_contentPane.createSequentialGroup()
                    .addContainerGap()
                    .addComponent(textFieldUsername, GroupLayout.DEFAULT_SIZE, 203, Short.MAX_VALUE)
                    .addGap(50)
                    .addComponent(textFieldPassword, GroupLayout.DEFAULT_SIZE, 203, Short.MAX_VALUE)
                    .addContainerGap())
                .addGroup(gl_contentPane.createSequentialGroup()
                    .addGap(150)
                    .addComponent(buttonLogin, GroupLayout.DEFAULT_SIZE, 176, Short.MAX_VALUE)
                    .addGap(150))
        );
        gl_contentPane.setVerticalGroup(
            gl_contentPane.createParallelGroup(Alignment.LEADING)
                .addGroup(gl_contentPane.createSequentialGroup()
                    .addGap(7)
                    .addComponent(labelName, GroupLayout.PREFERRED_SIZE, 41, GroupLayout.PREFERRED_SIZE)
                    .addGap(18)
                    .addGroup(gl_contentPane.createParallelGroup(Alignment.LEADING)
                        .addComponent(textFieldPassword, GroupLayout.DEFAULT_SIZE, 50, Short.MAX_VALUE)
                        .addComponent(textFieldUsername, GroupLayout.DEFAULT_SIZE, 50, Short.MAX_VALUE))
                    .addGap(29)
                    .addComponent(buttonLogin, GroupLayout.PREFERRED_SIZE, 59, GroupLayout.PREFERRED_SIZE))
        );
        contentPane.setLayout(gl_contentPane);
    }
}

Possible duplicate of [How to display faint gray "ghost text" in a JTextField?](https://stackoverflow.com/questions/10506789/how-to-display-faint-gray-ghost-text-in-a-jtextfield) — Sergiy Medvynskyy, Apr 06 '18 at 09:28

score 2 · Accepted Answer · answered Apr 06 '18 at 09:10

2

You could override the paintComponent method for the JTextField, something like this:

public class MyTextField extends JTextField {
.
.
@Override
public void paintComponent(Graphics g) {
  super.paintComponent(g);
  if (this.getText().equals("")){
     g drawString( ...);
  }
}

}

answered Apr 06 '18 at 09:10

Joonas P

86
1
5

thanks, this kinda works. I there a possibility to set the x and y in g.drawString aswell as the size of the text relative to the textField size? – Tobias Götz Apr 06 '18 at 09:25
I think you can use insets, I did this condition of component a few years ago – Joonas P Apr 06 '18 at 10:46

JTextField add grayed out text that disappears on focus

1 Answers1