Question

我希望将密码列表放在一起（没有它们在文本字段中），并希望在用户点击查看密码之前将其标记出来。

基本上：

客户名称
用户名：oidjdoisjs
密码：••••••••••

然后，当用户点击或悬停密码时，对文本进行了更改：

客户名称
用户名：oidjdoisjs
密码： doieiowwe

任何帮助都会很棒！

感谢。

Answer 1

另一项实施：http://jsfiddle.net/5McS2/2/

$('input').on('click.revealPassword',
    function() {
        if (this.value === "") return false;
        this.type = (this.type === "text")? "password" : "text";
   }
)

适用于Fx10，Ch17，Sf5.0.4，Op11。不适用于IE＆lt; 8（IE9未测试）

Answer 2

类似于this？

<span class="magic" data-password="test">****</span>
<script type="text/javascript">
$(function() {
    var $magics = $('.magic');
    $magics.each(function (index, element) {
        var $magic = $(element);
        var password = $magic.data('password');
        $magic.one('click', function () {
            $magic.text(password);
        });
    });
});
</script>

或（不包含$.each） - 和example：

<span class="magic" data-password="test">****</span>
<script type="text/javascript">
$(function() {
    var $magics = $('.magic');
    $magics.one('click', function () {
        var $magic = $(this);
        var password = $magic.data('password');
        $magic.text(password);
    });
});
</script>

注意：one是有意的 - 因为您无需恢复为 * ＆＃39;该活动应该只开一次！

编辑：aahhh ...我刚刚看到hover的请求 - 要实现此目的，您只需要将.one的第一个参数更改为{ {1}}

Answer 3

试试HTML：

<span class="hiddenPassword"><span style="display:none">thePassword</span>*****</span>

jQuery的：

$(".hiddenPassword").click(function() {
    var pw = $(this).children("span").text();
    $(this).text(pw);
});

Answer 4

不确定它是否适用于所有浏览器：

<input type="password" id="pw" />

JS：

var $pw = $("#pw");
$pw.focus(function() {
    $pw.get(0).type = "text";
});
$pw.blur(function() {
    $pw.get(0).type = "password";   
});

查看实时示例：http://jsfiddle.net/pdDxZ/

Answer 5

试试这个：

jQuery 1.7之前

function textify(ref) {
    var prop = $(ref).prop('type') == 'text' ? 'password': 'text';
    $(ref).prop('type', prop);
}
$('input[type="password"]#password').click(function() {
    textify(this);
}).hover(function() {
    textify(this);
},
function() {
    textify(this);
});

jquery 1.7。*

function textify(ref) {
    var prop = $(ref).prop('type') == 'text' ? 'password': 'text';
    $(ref).prop('type', prop);
}
$('input[type="password"]#password').on('click hover',
function(e) {
    textify(this);
});

Answer 6

虽然无法将输入字段从text类型更改为password，但您可以将其替换为其他元素并更改其中的类型：

$(document).ready(function() {
    var pass = $('#pass');
    pass.click(function() {
        if (pass.attr('type') == 'password') {
            pass.replaceWith('<input id="pass" name="pass" type="text" value="' + pass.val() + '" />');
        }
    });
});

以下是演示：http://jsfiddle.net/kB9rA/1/

在Span中切换密码的文本值？

6 个答案: