$(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>

当前回答

更容易……不需要创建所有动态元素。只需创建两个单独的字段,其中一个为“真实”密码字段(type="password"),另一个为“假”密码字段(type="text"),将假字段中的文本设置为浅灰色,并将初始值设置为“password”。然后用jQuery添加几行Javascript代码,如下所示:

    <script type="text/javascript">

        function pwdFocus() {
            $('#fakepassword').hide();
            $('#password').show();
            $('#password').focus();
        }

        function pwdBlur() {
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }
        }
    </script>

    <input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
    <input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />

因此,当用户输入“假”密码字段时,它将被隐藏,真实字段将被显示,焦点将移动到真实字段。他们将永远无法在假字段中输入文本。

当用户离开真实的密码字段时,脚本将查看它是否为空,如果为空,将隐藏真实的字段并显示假的字段。

注意不要在两个输入元素之间留下空格,因为IE会将一个元素置于另一个元素之后(呈现空格),并且当用户进入/退出字段时,字段会出现移动。

其他回答

jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

我只是做了以下改变输入的类型:

$('#ID_of_element')[0].type = 'text';

这很有效。

我需要这样做,因为我在一个asp.net Core 3.1项目中使用jQuery UI datepickers,他们在基于chromium的浏览器上不能正常工作(参见:https://stackoverflow.com/a/61296225/7420301)。

作为浏览器安全模型的一部分,很可能会阻止该操作。

编辑:实际上,现在在Safari中测试,我得到的错误类型属性不能更改。

编辑2:这似乎是一个错误直接从jQuery。使用以下直接的DOM代码就可以了:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

编辑3:直接从jQuery源代码来看,这似乎与IE有关(可能是一个bug或他们安全模型的一部分,但jQuery不是特定的):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

我已经创建了一个jQuery扩展之间切换文本和密码。适用于IE8(可能也适用于ie6和ie7,但没有测试),不会丢失你的值或属性:

$.fn.togglePassword = function (showPass) {
    return this.each(function () {
        var $this = $(this);
        if ($this.attr('type') == 'text' || $this.attr('type') == 'password') {
            var clone = null;
            if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) {
                clone = $('<input type="password" />');
            }else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
                clone = $('<input type="text" />');
            }
            $.each($this.prop("attributes"), function() {
                if(this.name != 'type') {
                    clone.attr(this.name, this.value);
                }
            });
            clone.val($this.val());
            $this.replaceWith(clone);
        }
    });
};

效果非常好。你可以简单地调用$('#element').togglePassword();在两者之间切换或给出一个选项来“强制”基于其他东西(如复选框)的动作:$('#element').togglePassword($checkbox.prop('checked'));

这里有一个DOM解决方案

myInput=document.getElementById("myinput");
oldHtml=myInput.outerHTML;
text=myInput.value;
newHtml=oldHtml.replace("password","text");
myInput.outerHTML=newHtml;
myInput=document.getElementById("myinput");
myInput.value=text;