javascript - jQuery:带有可读标签的密码字段?

标签 javascript jquery user-interface user-input

我为我当前的项目编写了这个名为 insidelabel() 的非常简单的函数,它让我在输入中为输入字段添加描述(标签)。

//Label inside of inputfields
function insidelabel(selector, name) {
    $(selector).val(name);
    $(selector).css({'color':'#999'});

    $(selector).focus(function () {
        //Input Value
        if ($(this).val() == name) { $(this).val(''); }
        $(this).css({'color':'#000'})
    });

    $(selector).blur(function () {
        if ($(this).val() == '') { $(this).val(name); }
        if ($(this).val() == name) {
            $(this).css({'color':'#999'});
        }
    });
}

insidelabel('.t', 'name');
insidelabel('.p', 'enter password');

因此,当输入聚焦时,文本消失,而当它模糊时,它再次具有相同的文本。

<form method="get" action="">
    <input type="text" class="t" value="" /><br/>
    <input type="password" class="p" value="" />
</form>

但是现在我想知道如何扩展该功能以在密码字段内也有一个标签!听起来很奇怪... 说明:我想要一个密码字段(type="password")在其中有一个可读的标签(比如“输入密码”)。一旦用户输入文本,密码应该是不可读的(虚线)。我知道,解释真的很糟糕,但我想你可能明白我的意思。

我想知道最好的方法是什么?我是否应该查询输入字段是否为 type="password",如果是,我将其设置为 type="text" - 输入文本后,我将其设置回 type="password" 再次。知道最好的解决方案是什么吗?

这是我的例子:http://jsfiddle.net/R8Zxu/

最佳答案

如果你使用真正的<label>位于(透明)<input> 下方而不是用 value 属性伪造它(这有一些主要的可访问性影响)那么你可以做类似的事情:http://dorward.me.uk/tmp/label-work/example.html

不要尝试更改现有输入的类型。 Internet Explorer 不允许。

关于javascript - jQuery:带有可读标签的密码字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5341546/

相关文章:

Jquery 验证表单未在 'return true' 上提交

javascript - 对于 ajax url,AWS tomcat 日志上显示 404

javascript - axios get 和 post 返回的 data/promise 有区别吗?

javascript - AngularJS 复选框和 ng-change 的工作方式非常奇怪

javascript - 如何在浏览器中防止 "Stop running this Script"?

javascript - Twitter Bootstrap - 动态添加/删除选项卡和选项卡内容

c++ - 在派生类中实现插槽 - qt4/c++

java - try/catch block 在 Action 监听器中不起作用

java - 你如何在 Java 中制作如此复杂的 GUI? Gwt有可能吗?还是需要用别的东西?

javascript - 从二进制文件中识别数据类型