$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

这是为了将password类型的#password输入字段(id="password")更改为普通的文本字段,然后填充文本"password"。

但这并不奏效。为什么?

表格如下:

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
  <ol>
    <li>
      <div class="element">
        <input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
      </div>
    </li>
    <li>
      <div class="element">
        <input type="password" name="password" id="password" value="" class="input-text" />
      </div>
    </li>
    <li class="button">
      <div class="button">
        <input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
      </div>
    </li>
  </ol>
</form>

当前回答

现在,你可以用

$("#password").prop("type", "text");

当然,你应该这样做

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

除了IE。在IE中也有占位符垫片来模仿这个功能。

其他回答

类型属性不能更改,您需要用文本输入替换或覆盖输入,并在提交时将值发送给密码输入。

$('#pass').focus(function() { 
$('#pass').replaceWith("<input id='password' size='70' type='password' value='' name='password'>");
$('#password').focus();
});

<input id='pass' size='70' type='text' value='password' name='password'>

Here is a method which uses an image next to the password field to toggle between seeing the password (text input) and not seeing it (password input). I use an "open eye" and "closed eye" image, but you can use whatever suits you. The way it works is having two inputs/images and upon clicking the image, the value is copied from the visible input to the hidden one, and then their visibility is swapped. Unlike many of the other answers which use hardcoded names, this one is general enough to use it multiple times on a page. It also degrades gracefully if JavaScript is unavailable.

这是其中两个在一页上的样子。在这个例子中,密码a是通过点击它的眼睛来显示的。

$(document).ready(function() { $('img.eye').show(); $('span.pnt').on('click', 'img', function() { var self = $(this); var myinp = self.prev(); var myspan = self.parent(); var mypnt = myspan.parent(); var otspan = mypnt.children().not(myspan); var otinp = otspan.children().first(); otinp.val(myinp.val()); myspan.hide(); otspan.show(); }); }); img.eye { vertical-align: middle; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <b>Password-A:</b> <span class="pnt"> <span> <input type="password" name="passa"> <img src="eye-open.png" class="eye" alt="O" style="display:none"> </span> <span style="display:none"> <input type="text"> <img src="eye-closed.png" class="eye" alt="*"> </span> </span> </form> <form> <b>Password-B:</b> <span class="pnt"> <span> <input type="password" name="passb"> <img src="eye-open.png" class="eye" alt="O" style="display:none"> </span> <span style="display:none"> <input type="text"> <img src="eye-closed.png" class="eye" alt="*"> </span> </span> </form>

试试这个 演示在这里

$(document).delegate('input[type="text"]','click', function() {
    $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">');
}); 
$(document).delegate('input[type="password"]','click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
}); 

简单的解决方案,所有人都想在所有浏览器的功能:

HTML

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

jQuery

$("#passwordSwitch").change(function(){
    var p = $('#password');
    var h = $('#passwordHide');
    h.val(p.val());
    if($(this).attr('checked')=='checked'){
        h.hide();
        p.show();
    }else{
        p.hide();
        h.show();
    }
});