CODEWITHSUNDEEP
javascriptjquery
Jacob
Jacob

Reputation: 99

how to make a jquery hint password with asterisks

example: http://jsfiddle.net/na2tD/

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

Upvotes: 0

Views: 2235

Answers (5)

gilly3
gilly3

Reputation: 91497

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);
        });
    });
}

Upvotes: 0

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230336

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/

Upvotes: 4

Bruno Silva
Bruno Silva

Reputation: 3097

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/ .

Upvotes: 0

nzifnab
nzifnab

Reputation: 16092

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

Upvotes: 2

westo
westo

Reputation: 575

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

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

Upvotes: 0

Related Questions