使用jQuery切换表单字段类型

Question

有没有办法在页面上添加复选框或单选按钮来切换输入类型"文本"和"密码"之间的表单域？

我把jQuery放在主题行中的原因是因为我试图独占使用它,我对它的潜力有很大的信心.:)

谢谢.

---

更新:我需要切换,因为我需要用户能够回来并查看以前输入的输入.(提示:这不是登录脚本.)

Answer 1

我最终将其简化为以下解决方案:

$('input#checkbox').change(function(){
    var type    = ($(this).is(':checked') ? 'text' : 'password'), 
        input   = $('input#password'),
        replace = input.clone().attr('type', type)
        input.replaceWith(replace);
});

Answer 2

您将需要使用一些巧妙的 jquery 来实现这种错觉。

现场演示： http : //jsfiddle.net/aaK9E/2/

鉴于以下 HTML/CSS：

HTML

<input type="text" size="50" id="t" name="passtext" />
<input type="password" size="50" id="p" name="passpass" /><br />
<input type="checkbox" id="c">Show Password

CSS

#t{display:none;}

您可以使用复选框作为这样的切换

var showPass=false;
$('#c').change(function(){
    showPass = ($('#c:checked').length>0);
    if (showPass){
        $('#p').hide();
        $('#t').show();
    }else{
        $('#t').hide();
        $('#p').show();
    }
});

现在，您需要确保两个文本框始终具有相同的值。当一个改变时，你想改变另一个，反之亦然。为此，您需要使用以下 JS

$('#p').change(function(){
    if (!showPass) //password box is showing. sync its value to the textbox
        $('#t').val($('#p').val());
});
$('#t').change(function(){
    if (showPass) //textbox is showing. sync its value to the password box
        $('#p').val($('#t').val());
});

如果两者passtext和passpass的形式相同，则它们都将传递给接收器，并且由于我们正在使用（例如使用 PHP）同步它们，因此它们都具有相同的值$variableName = $_REQUEST['passpass'];