Question

为什么jQuery不将#password_input的type属性更改为password？

<html>
    <head>
        <title></title>
        <style type="text/css">
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#password_input").attr('type','password');
        });
        </script>
    </head>
    <body>
        <div id="loginBox">
            <form>
            <input type="text" id="username_input" name="username" /><br />
            <input type="text" id="password_input" name="password" />
            </form>
        </div>
    </body>
</html>

Answer 1

是的，你可以。

试试这个作品

<input type="text" class="pwd">
  $('.pwd').click(function(){
  $(this).get(0).type='password';
});

Answer 2

'type'属性/属性无法更改。

编辑：这在发布时对于JQuery来说是准确的。请参阅其他答案，了解如何立即完成。

Answer 3

这是大多数主要浏览器用来缓解屏幕阅读和密码被盗的安全措施（从password到text，反过来更重要。

我无法从您的代码中判断出您要尝试做什么，但这是我的猜测：您希望其中包含单词Password的文本框作为提示，并且当它获得焦点时，用户输入密码作为密码字段。要实现此目的，您可以使用两个元素：<input type="text">和<input type="password">，后者最初隐藏。当用户专注于文本框时，只需隐藏它，显示密码字段，然后设置焦点。在它们之间来回切换可能会很棘手。

更新

现在在现代浏览器中更容易实现。只需使用这样的东西（这里是jsFiddle）：

<input type="password" placeholder="Password" />

Answer 4

您无法更改type属性。你必须创建一个新元素并删除旧元素：

var originalBtn = $("#password_input");
var newBtn = originalBtn.clone();

newBtn.attr("type", "password");
newBtn.insertBefore(originalBtn);
originalBtn.remove();
newBtn.attr("id", "password_input");

Answer 5

您可以随时使用纯粹的js：

document.getElementsByName("login_pass")[0].type="text";

Answer 6

这样做

$('<input type="password" id="password_input" name="password" />').insertAfter('#password_input').prev().remove();

检查http://jsfiddle.net/RyVU8/

处的工作示例

<强>更新

如果要在密码字段中显示纯文本，然后在焦点上将其设为常规密码字段，则可以执行以下操作

$('#clear').focus(function() {
    $('#clear').hide();
    $('#password_input').show().focus();
});
$('#password_input').blur(function() {
    if ($('#password_input').val() == '') {
        $('#clear, #password_input').toggle();
    }
});

其中#clear表示一个文本字段，当它处于模糊状态且用户尚未输入任何密码时，显示的是密码字段而不是密码字段。

检查http://jsfiddle.net/uNGKb/3/

处的工作示例

Answer 7

只需创建2个同步输入字段。一个作为密码，一个作为文本。然后通过按钮切换他们的visiblity。不要忘记在开始时隐藏文本输入。

<input type="password" id="inp_passwd"/><input type="password" id="inp_passwd2"/>
<input id="btn_show_passwd" type="button" value="Show Password" />

使用Javascript：

// sync input fields
$('#inp_passwd').keyup(function(){
    $('#inp_passwd2').val($(this).val());
});
// show clear password
$('#btn_show_passwd').mousedown(function(){
    $('#inp_passwd').hide();
    $('#inp_passwd2').show();
});
// hide clear password
$('#btn_show_passwd').mouseup(function(){
    $('#inp_passwd').show();
    $('#inp_passwd2').hide();
});
// hide hidden text-field on start
$('#btn_show_passwd').mouseup();

您也可以使用setTimeout而不是mouseup

Answer 8

<span>Password:</span>
<input type="text" id="pwd" style="width: 180px; color: Gray;" onfocus="Changetxt();this.type='password'" onblur="if(this.value==''){this.type='text';textboxtype();}" value="Enter Your Password Here" />

 <script>

        function Changetxt() {
            if ($('#pwd').val() == "Enter Your Password Here") {
                $('#pwd').val('');
                $('#pwd').css('color', 'black');
            }
        }

        function textboxtype() {
            if ($('#pwd').val().length < 1) {
                $('#pwd').val('Enter Your Password Here');
                $('#pwd').css('color', 'gray');
            }
        }

    </script>

Answer 9

您是否尝试过使用.prop？

$("#password_input").prop('type','password');

http://api.jquery.com/prop/

Answer 10

可能需要在密码字段中显示文本信息制作图片，设置密码字段的背景，并在密码字段焦点更改背景图片时删除，以达到提示用户的效果< / p>

Answer 11

我最近遇到了类似的挑战，我想评估一下我的观点。我使用了上面的一些解决方案和其他一些使用jQuery（我非常喜欢）。但是当测试时间到来时，我们意识到通过jQuery和attr()功能的解决方案不起作用。所以我通过纯Javascript找到了合适的解决方案。

  var input = document.getElementById('txbOldPass');
  var newInput = document.createElement('input');

        newInput.type = 'text';
        newInput.id = input.id;
        newInput.value = input.value;
        input.parentNode.replaceChild(newInput, input);
        newInput.className = 'text';

和相反的

  var input = document.getElementById('txbOldPass');
        var newInput = document.createElement('input');
        newInput.type = 'password';
        newInput.id = input.id;
        newInput.value = input.value;
        input.parentNode.replaceChild(newInput, input);
        newInput.className = 'password';

Answer 12

此处的所有解决方案对我都不起作用（Chrome版本51.0.2704.103 m（64位））。这样做是否有效：

jQuery(function() {
    setTimeout(function(){
        jQuery('.pwForm').attr('type','password');
    }, 1);
});

也适用于IE 11！

等待DOM准备好并等待1毫秒。然后将type = text更改为type = password

Answer 13

使用此代码：

<input type="text" id="password_input" name="password" />
<script>
$("#password_input").click(function(){
    $(this).prop('type', 'date');
});
</script>

Answer 14

要改变type属性值，只需要更新你的JQuery即可。

请看下面的例子。

Request protocol is https: can only set caching headers for get

Answer 15

当上述类型属性无法更改时，上述答案部分错误。是的，它可以通过prop / attr jquery方法更改。问题是，所有浏览器都支持IE

将属性“类型”从文本更改为密码

15 个答案:

更新

检查http://jsfiddle.net/RyVU8/

检查http://jsfiddle.net/uNGKb/3/