cloudfour / hideshowpassword Goto Github PK

Just FYI: hideToggleUntil option is not documented

I tried using this plugin for a form created by a the ultimate member plugin I included the hideshowPassword plugin in the footer of the page except for the jquery dependency which is already in use througn my functions.php file but it doesnt work and if I add the jquery dependency script in the footer of the page the form completely disapears.

I wanted to override the labels for the toggle and got strange errors because the other fields in the states hash were missing. You can avoid this by doing a deep merge with $.extend(true, {}, ...

Some events are now namespaced to address #20, but they are inconsistent (as pointed out by @lyzadanger while reviewing #22). This was acceptable to avoid a breaking change, but we should really make them nicer in the next major release.

Line 81:

touchSupport: (typeof Modernizr === 'undefined') ? false : Modernizr.touch,

Hi Guys,

Thanks for making this great little plugin! One small issue I have is the inline width on the hideShowPassword-wrapper div. What would be the best way to make the wrapper fluid when using the second example?

Thx!

In Firefox and Chrome, only the 3rd example on the demo page (checkbox) works with keyboard action (Tab + Space bar ), not the 2 others.

See also: Making your jQuery plugin work better with npm tools

• Revise module portion of JS to include Node/CommonJS
• Add package.json
• Add minification script to package.json
• Resolve duplication between package.json and bower.json
• Test npm/Browserify
• Test Bower
• Update README
• Merge release
• Tag release
• Publish

About this plugin, how can the focus skip the display password button after pressing the [TAB] key?
关于这个插件,如何可以在按下[TAB]键后,使得焦点跳过显示密码按钮?

My current code
我目前的代码:
$('#input_pwd').hideShowPassword({
show: false,
innerToggle: 'focus',
triggerOnToggle: 'focus'
});

This stack overflow (no valid answer at the time of my re-posting here) explains the problem well:
http://stackoverflow.com/questions/25402513/cursor-goes-beyond-in-text-input-in-ie10

This plugin sets padding-right on the input. Then the above issue occurs on IE10 with long passwords.

In an effort to make the plugin easy to use for novices and control-freaks alike, the plugin currently uses several shorthand methods as well as shorthand arguments to simplify calling the plugin. This has the unintended side-effect of the documentation being confusing... any one method of calling the plugin is as simple as it can be, but altogether they make the plugin as a whole more confusing.

We should explore consolidating things into one consistent JavaScript API, with possibly something like a data-attribute API for those with simpler needs.

Hello, how can i attach hidePassword to hover event? I need show passord on mousedown and hide on mouseup.

First, Thanks for this plugin.

I am using it one of my project and it works fine. I am having a little issue which is stopping me to go ahead.

I am having a floating box which accepts username and password. Once this plugin is installed, the size of the password text box changes to small size.

On other pages, this works fine. The issue is only with the floating box.

Without this plugin, the size of the password text box is normal as the username.

Love the plugin. The hide/show toggle added to the password field is available to users with a pointer, but not available for keyboard users. Keyboard availability is a key element of accessibility, so it would be good to:

1. add a tabindex=0 to the toggle div, which will allow tabbing to the hide/show element
2. add a keypress event handler to allow space or enter to toggle the hide/show status

Hello,

Just encountered a problem when requiring hideshowpassword using Browserify.

Given that I need to support IE8, jQuery is defined as ^1.11.3 in my package.json.

Since you have also added jQuery as dependency, and that the two versions mismatch, the hideshowpassword function will be attached to your jQuery instance, instead of mine, making it unavailable from my code.

Why jQuery has been added as production dependency, given that the function is attached to $.fn ?

Currently, the event options are not namespaced (touchstart instead of touchstart.hideShowPassword, for example). This can result in some weirdness if applied to elements that have similar events attached to them.

I guess this style is definitely a requirement to the plugin (in order to achieve the same behaviour as the demo).

.hideShowPassword-toggle {
z-index: 3;
}

keep on developing this plugin, is really really great !!

I have an element with auto left and right margins. In Chrome and other Webkit-based browsers, this is inherited by the wrapper by assigning the margin the calculated pixel value of the left and right margins. In Firefox, the left and right margins are instead inherited as 0px margins.

I'd like to see a 25% smaller wink image, about the same size as the one in IE11.

It would be nice if the example stylesheets could be included via npm the same way that the JavaScript file can be. (This would also address the intent behind #14.)

The NPM package seems to be broken :

npm install hideShowPassword

fetch failed https://registry.npmjs.org/hideShowPassword/-/hideShowPassword-2.0.4.tgz
npm ERR! Error: 404 Not Found

By the way, thanks for the good work. It works very well.

Hi - was about to write about an IE8 bug, before I started looking into it and realised that older versions of IE throw an error if you change the type property of an input element after creation - so it's unfixable in this incarnation.

It might be worth adding an exception so that the script just disables itself in such browsers, or at least a mention in the docs that IE < 9 throws an error?

Many thanks for releasing the script, it was a great help!

Hello.

When I display a form in a modal, the plugin rendering fails somehow.

Screen shot with plugin enabled on a modal dialog:

Screen shot with plugin disabled on a modal dialog:

Screen shot with plugin enabled, without modal dialog:

And here is the initialization function:

// password reveals
$('#' + signupModelID +  '-password').hideShowPassword({
    show: false,
    innerToggle: true,
});

What do you think?

Thanks.

Howdy Tyler!

Just upgrading to v2... Looks like I can just use the shorthand method .showPassword('focus') to get my desired behavior. However, I cannot seem to find the option for hiding the toggle on the blur event. I'm probably missing something simple. Figured it best to just ask though...

Thx for the great plugin :-)

Validation of css to use with this library (via stylelint and stylelint-config-standard) detects the following errora:

 ✖  Expected class selector ".hideShowPassword-toggle" to be kebab-case  selector-class-pattern
 ✖  Expected class selector ".hideShowPassword-field" to be kebab-case   selector-class-pattern

classes should be renamed like ".hide-show-password-toggle" and ".hide-show-password-field"

The majority of the issues we receive are related to the styles set via JavaScript on the wrapper and inline toggle. It may be the case that the convenience of this method is outweighed by the risk of breakage introduced.

In an upcoming major-release version with support for smarter importing of styles (see #25) and without a jQuery dependency (see #32), it may make sense to shift that responsibility back to CSS-land.

At least at Windows machines (haven't tested with others OS, but with multiple Windows machines), the bower install fails as bower.json seems to be a symbolic link with "package.json" text within it. The symbolic link seems to break down for some reason and since the "package.json" isn't exactly valid JSON, the install aborts.

bower hideshowpassword#*                               EMALFORMED Failed to read
<temp path here>\bower.json

Additional error details:
Unexpected token p

IE8 and earlier doesn't allow changes to the type attribute of <input> elements, so browser compatibility isn't much of a concern for this script. Because of that, and because this script is intended to improve mobile or touch experiences in particular, it seems feasible to accept that we might not need jQuery for the next version. It may make sense to include a jquery.* version for convenience, but I imagine it could feasibly include the vanilla JS script and use it to instantiate a plugin.

How do I remove the inline styles on hideShowPassword-wrapper and hideShowPassword-field?

I tried adding the style property in the options object, but still the inline styles are added automatically.

There's a console.log in toggleKeyEvent. Old browsers don't support console.log, though I'm not sure what your list of supported browsers is, so this could be a non-issue.

It would be great if this plugin didn't assume a jQuery global. This could be done with the UMD syntax for jQuery plugins.

https://twitter.com/jnowland/status/755304430430326785

http://codepen.io/jnowland/details/bZowPK/

https://css-tricks.com/snippets/css/password-input-bullet-alternatives/

via @grigs

I used this code:

$('input[name="card_cvc"]').hidePassword({
          innerToggle: true,
          toggle: {
                        attachToEvent: 'mousedown mouseup',
                        attr: {
                            role: 'button',
                            'aria-label': 'Test',
                            title: 'Test',
                            tabIndex: 0
                        }
                    }
                });

But i saw title "Show Password" anyway.

http://s020.radikal.ru/i708/1612/af/9168bf09e903.png

I'm using two tabs based on the bootstrap framework - if the hideShowPassword plugin is called in the tab that's visible on page load, all is fine.

If I'm switching to the second tab, the input gehts shortened and the icon is displayed above it, instead of inside of it. It still works though, just the layout gets messed up.

I solved it by overriding the css with:

.hideShowPassword-wrapper { width: 100% }
.hideShowPassword-toggle { margin-top: -19px !important }

wrapElement method always creates a new "wrapper" element around input.
In some situations it would be great to pass the wrapper element within options and just do initialization like copy all CSS etc.

My use case is that we uses "adaptive placeholders" which requires to have label exactly after input element. Something like this:

<div>
  <input>
  <label>
</div>

The plug in works so well. But it just has a weird issue. When the user name or the password input have not been set up with any value, it will automatically show the browser saved user name and password for the current webpage. Is there a way to not show browser saved user name and password? Thank you

Sorry for the question again.

I have 2 password text boxes.

I tried the plugin with the wildcard selectors. For me, it works only for the first text box.

$("input[name*=password]").showPassword(true, { wrapper: { enforceWidth: false } });

Please note the * in the selector.

Prior to this version of iOS Safari, you could toggle the password visibility without losing keyboard focus. This no longer seems to be the case as of iOS 12.1.2.

I've instantiated my hideShowPassword element not to inherit margin values (since they aren't inherited properly in Firefox. See issue #33.). However, the margins are still being specified on the wrapper element. Here's how I instantiated the element:

$('#password').hideShowPassword(false, true, {
    wrapper: {
      inheritStyles: ['display', 'verticalAlign']
    }
});

It would be very simple to abstract the basic hide/show component from the inset toggle UI. Doing so might also simplify the structure of the options and such.

It would be good if we could set global defaults for the configuration, particularly for localisation of Show/Hide

$.fn.hideShowPassword.defaults = {...}

I think it would just be a simple case of adding $.extend({}, $.fn.hideShowPassword.defaults, params) here https://github.com/cloudfour/hideShowPassword/blob/master/hideShowPassword.js#L198

In your demo, the middle one has the password initially shown with a toggle. I want it initially masked, like in IE11 and have the show button showing. I don't see how to do that.

Noticing that when a password field is initialized, class "hideShowPassword-field" is not assigned to the input element. The class is only added after clicking the toggle button for the first time.

Traced it to if (! this.options.enable || this.isType()) return false; in the updateElement function. On init, both evaluate to true.

Is this by design?

Thanks for making your plugin available.

Hi,

I'm getting this error just calling the hideShowPassword() function on my jQuery password object.

Looking at your code, it seems that you change the type attribute using .attr() that is not allowed by jQuery. Using .prop() does the trick though.