Question

目前密码不是星号，密码文本字段的'type'需要是type =“text”，因此如果我想要星号，则无法更改为type =“password”。如何同时使用jquery提示和星号

Answer 1

您可以利用名为placeholder的新HTML5属性。不需要Javascript！

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

演示：http://jsfiddle.net/na2tD/8/

Answer 2

这是暗示的糟糕实施。首先，如果有人提交一个空表格，他们实际上将提交＆＃34;用户名＆＃34;和＃34;密码＆＃34;作为参数，过滤服务器端的那些是很烦人的。

最好使用placeholder属性：http://jsfiddle.net/na2tD/6/

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

编辑：

如果您需要它来支持不支持html5 placeholder属性的旧浏览器，您可以添加此js：https://github.com/parndt/jquery-html5-placeholder-shim

Answer 3

看看这个GitHub页面。我认为这就是你所追求的目标。

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

Answer 4

如果您不想使用HTML5占位符，则可以使用＆＃34; regular＆＃34;更改输入的类型。 JavaScript：input.type = 'password'。看看http://jsfiddle.net/brunomsilva/na2tD/5/。

Answer 5

使用占位符属性。当然，这在IE中不起作用，并且有许多解决方案可以克服IE缺乏支持。其中大多数都不是很好，特别是那些改变input元素值来完成占位符文本的那些。这种方法存在问题，并且存在可访问性问题。

更好的方法是使用不修改输入值的技术。它应该自动使用已使用placeholder属性的表单，而不对标记进行其他更改。我使用的技术是在输入后面放置一个标签，以便通过输入显示。当输入具有焦点或值时，它会获得背景颜色以隐藏占位符标签。

首先，我检查浏览器是否原生支持placeholder。此代码告诉我们是否支持占位符：

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

如果不支持placeholder，我会在具有<label>属性的每个<input>之前注入绝对定位的placeholder，并添加noplaceholder类输入指示占位符不是本机支持的，标签应通过输入显示。我使用CSS来设置标签的样式以匹配输入并降低输入的不透明度，以便标签显示出来。其余的只是简单的事件处理，根据输入是否具有焦点和/或值来添加或删除noplaceholder类。

这是我的代码。将以下CSS和JavaScript放入使用占位符属性的现有页面中，它应该可以工作。 CSS可能需要稍微调整才能使其在您的页面上运行。

演示： http://jsfiddle.net/yjfvm/2/

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

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

如何使用星号制作jquery提示密码

5 个答案: