how to make a jquery hint password with asterisks

Question

currently the password is not asterisks as 'type' for password text field needs to be type="text" so it cannot be changed to type="password" which is needed if i want asterisks. How do I get both jquery hint and asterisks working together

@westo: because in his implementation the watermark text will be displayed in asterisks too. — Sergio Tulentsev, Mar 14 '12 at 23:57
this might be interesting to you: http://stackoverflow.com/a/2304369/306848 Seems to be a similar problem — ma cılay, Mar 14 '12 at 23:57
@Jacob, if one of these answers was what you were looking for, please accept it to both improve your accept ratio, and give people the points they deserve :) — nzifnab, Mar 17 '12 at 21:26

Sergio Tulentsev · Answer 1 · 2012-03-15T00:11:33.773

4

You can leverage the new HTML5 attribute, called placeholder. No Javascript required!

<input type="password" name="password" placeholder="Enter password" size="20" />

Demo: http://jsfiddle.net/na2tD/8/

edited Mar 15 '12 at 00:11

answered Mar 14 '12 at 23:56

Sergio Tulentsev

210,238
40
347
343

This will not work in quite a few browsers as they don't have support for HTML 5 – westo Mar 14 '12 at 23:58
@westo: quite a few? [Only IE (among desktop browsers) still doesn't support it](http://caniuse.com/#search=placeholder). – Sergio Tulentsev Mar 15 '12 at 00:05
1

Or older versions of Firefox. I know many people still on 3.6 :\ But I agree, we should all be pushing towards [progressive enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) – nzifnab Mar 15 '12 at 00:10
By quite a few, I was referring to the number of internet users that are using browsers that don't support this feature. http://gs.statcounter.com/#browser_version-ww-monthly-201102-201202-bar – westo Mar 15 '12 at 00:11

score 2 · Answer 2 · answered Mar 14 '12 at 23:58

That's a poor implementation of hinting. First of all, if someone submits an empty form they will actually be submitting "Username" and "Password" as parameters, and it'll be annoying to filter those out server-side.

Better to just go with the placeholder attribute: http://jsfiddle.net/na2tD/6/

<input type="password" name="password" title="Password" size="10" placeholder="Password"/>

EDIT:

And if you need it to support older browsers that don't support the html5 placeholder attribute, you can add this js: https://github.com/parndt/jquery-html5-placeholder-shim

it also goes against any previous user experience where asterisks in a password field indicate a auto-filled user/pass combo. anything apart from the placeholder tag would be rather confusing. — arvidkahl, Mar 15 '12 at 00:01

score 0 · Answer 3 · answered Mar 14 '12 at 23:57

0

Have a look at this GitHub page. I think this is what you are after.

https://github.com/nachokb/jquery-hint-with-password

answered Mar 14 '12 at 23:57

westo

535
2
10

score 0 · Answer 4 · answered Mar 14 '12 at 23:58

0

If you don't want to use HTML5 placeholder, you can change the type of the input using "regular" JavaScript: input.type = 'password'. Have a look at http://jsfiddle.net/brunomsilva/na2tD/5/ .

answered Mar 14 '12 at 23:58

Bruno Silva

2,979
15
20

That WILL NOT WORK in internet explorer. You can't dynamicaly change the type of an input (at least that's my understanding) – nzifnab Mar 15 '12 at 00:01

gilly3 · Answer 5 · 2012-03-15T19:23:53.610

Use the placeholder attribute. Of course, that doesn't work in IE, and there are many solutions out there to overcome IE's lack of support. Most of these are not very good, especially those that change the value of the input element to accomplish the placeholder text. This approach is buggy and has accessibility issues.

The better approach is to use a technique that doesn't modify the input's value. It should work automatically with forms that already use the placeholder attribute with no additional changes to the markup. The technique I use is to place a label behind the input so that it shows through the input. When the input has focus or a value, it gets a background color to hide the placeholder label.

First I check to see if the browser natively supports placeholder. This code tells us whether placeholder is supported:

if (!("placeholder" in document.createElement("input"))) {
    // placeholder is not natively supported
}

If placeholder is not supported, I inject an absolutely positioned <label> before each <input> that has a placeholder attribute and I add a noplaceholder class to the input indicating that placeholder is not natively supported and that the label should show through the input. I use CSS to style the label to match the input and decrease the opacity of the input so that the label shows through. The rest is just pretty straightforward event handling to add or remove the noplaceholder class depending on whether the input has focus and/or a value.

Here's my code. Drop the following CSS and JavaScript into an existing page that uses placeholder attributes and it should work. The CSS may require a little tweaking to get it to work on your page.

Demo: http://jsfiddle.net/yjfvm/2/

The CSS:

input[placeholder], .placeholder {
    font-family: Sans-Serif;
    border: 1px solid #b2b2b2;
    border-radius: 3px;
    padding: 2px 4px;
    vertical-align: middle;
    font-size: 1em;
    line-height: 1em;
}
.placeholder + input[placeholder].noplaceholder {
    filter: alpha(opacity=100);
    background-color: #fff;
    border-color: #b2b2b2;
}
.placeholder + input[placeholder] {
    position: relative;
    filter: alpha(opacity=50);
    border-color: #666;
}
.placeholder, label.placeholder {
    border-color: #fff;
    position: absolute;
    margin-top: 1px;
    margin-left: 0;
    top: auto;
}

The JavaScript:

if (!("placeholder" in document.createElement("input"))) {
    $(function() {
        $("input[placeholder]").each(function() {
            $("<label>")
                .attr("for", this.id)
                .addClass("placeholder")
                .text(this.getAttribute("placeholder"))
                .insertBefore(this);
            $(this).addClass("noplaceholder");
        }).on("keydown focus input", function() {
            $(this).addClass("noplaceholder");
        }).on("change blur", function() {
            if (!this.value) {
                $(this).removeClass("noplaceholder");
            }
        }).change();
        $("form").on("reset", function() {
            setTimeout(function() {
                $("input[placeholder]:not(:focus)").change();
            }, 0);
        });
    });
}

how to make a jquery hint password with asterisks

5 Answers5