cloudfour / hideshowpassword Goto Github PK
View Code? Open in Web Editor NEWBecause life's too short to waste time re-typing passwords.
Home Page: http://blog.cloudfour.com/hide-show-passwords-plugin/
Because life's too short to waste time re-typing passwords.
Home Page: http://blog.cloudfour.com/hide-show-passwords-plugin/
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 !!
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
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.
See also: Making your jQuery plugin work better with npm tools
package.json
package.json
package.json
and bower.json
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.
Just FYI: hideToggleUntil
option is not documented
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.
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.
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.
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 }
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
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.)
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.
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.
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.
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, {}, ...
In Firefox and Chrome, only the 3rd example on the demo page (checkbox) works with keyboard action (Tab + Space bar ), not the 2 others.
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'
});
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
?
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.
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:
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.
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.
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.
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.
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.
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"
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 :-)
Line 81:
touchSupport: (typeof Modernizr === 'undefined') ? false : Modernizr.touch,
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.
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.
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!
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']
}
});
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
Hello, how can i attach hidePassword to hover event? I need show passord on mousedown and hide on mouseup.
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.
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.
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!
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>
It would be great if this plugin didn't assume a jQuery global. This could be done with the UMD syntax for jQuery plugins.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.