Member Avatar for saideepak89

hi........ i having a login page , and it has a password field ,i want to see the password before i submit.

  • 3 Contributors
  • 2 Replies
  • 113 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by MagicMedia

Dani AI

Generated

wanted to see the characters in a password field before submitting. pointed to developer tools for inspecting form fields and suggested switching the field to plain text. Both approaches work for quick debugging, but they are not ideal UX solutions for live sites and have accessibility and security trade-offs.

A better pattern is an explicit, user‑controlled "show/hide password" control built into the form. Implement it as a real button inside the input wrapper (not just visual text), give it clear screen‑reader text that toggles between "Show password" and "Hide password" (or use aria-pressed), keep keyboard focus on the password field, and make the touch target large enough for mobile. For added privacy, consider a hold-to-reveal variant so the password is visible only while the control is pressed.

Security and compatibility notes: the reveal must happen only on the user’s device and never be sent or stored in plaintext on the server or in persistent storage. Avoid disabling browser autocomplete or password managers, since those assist users and reduce friction. Test the control with common password managers and on mobile browsers, which sometimes supply their own reveal icons.

Implementation checklist:

  1. Put a button element inside the field container and provide an accessible label.
  2. Toggle visibility only while the user requests it (toggle or hold-to-reveal).
  3. Update ARIA attributes and visible label text so screen readers announce the current state.
  4. Preserve focus and prevent the control from submitting the form.
  5. Test with password managers and mobile browsers.

Authoritative references for implementation and accessibility guidance: MDN’s notes on password inputs (Input (type=password)), the GOV.UK pattern for show/hide passwords (), and the W3C WCAG guidelines (WCAG).

Recommended Answers

All 2 Replies

Member Avatar for drjohn

Install web developer toolbar (Firefox and Chrome) and ask it to show the passwords, under forms.

Member Avatar for MagicMedia

Use type="text" instead of type="password"

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.