show/hide toggle?

  • Is the eye icon supposed to be a toggle switch? If so, it isn’t working in any of my browsers.

    If not, then it’s pointless, since the user can already see whether the password is hidden or shown. It also takes up space and, in my case, interferes/overlays with the last chars of the user input; looks messy.

    If it isn’t a toggle, it really should be, to allow the user to select mode rather than the site forcing it on them, and it shouldn’t overlay their input. This would enhance UX.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author kimipooh

    (@kimipooh)

    The icon is the feature in which the password is shown because some users requested it.


    Your suggestion is a good idea about selectivity. In version 4.1, the option “hideIcon” was added.
    ex. [password* passowrd-10 hideIcon].
    Please update the plugin and try it.

    Thread Starter IT Hertz

    (@it-hertz)

    Thanks for the update. It restores the form to its original appearance.

    I fixed the overlay by giving the icon a background color that matches the form page and setting left padding and margin to conceal the bullets (necessary with FF, since it uses huge bullets, and on mobile devices, where the fields are reduced in width).
    However, I’m having trouble pushing the icon down, as top margin/padding don’t work. I tried to set a flexbox to align the items that way, but no joy. My fields are a little taller than default height, and the icon isn’t quite centered vertically.

    At any rate, I see the onclick="pushHideButton('Password') attribute. I haven’t looked at your js to see what the listener is doing, but this isn’t working in any browser.

    Plugin Author kimipooh

    (@kimipooh)

    As for the JS, specifically, it works as follows.
    Initially, the password is hidden (input tag type is password) and the eye icon is open. When the eye icon is clicked, the type of the input tag is set to text. Also, when clicked, it just switches between the class name when the eyes are open ( fa-eye ) and the class name when the eyes have slashes in them ( fa-eye-slash ).

    The rest is using fontawesome.com’s service, and I don’t know more than that because of the environment I have (WordPress 6.3 + PHP7.4.33/PHP8.2) and some users who are actually using it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘show/hide toggle?’ is closed to new replies.

Tags