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

当前回答

这样工作起来更容易:

document.querySelector('input[type=password]').setAttribute('type', 'text');

为了再次将其转回password字段,(假设password字段是带有文本类型的第二个输入标记):

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')

其他回答

我已经创建了一个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'));

下面是允许您更改文档中元素类型的一小段代码。

jquery.type.js (GitHub Gist)

var rtype = /^(?:button|input)$/i;

jQuery.attrHooks.type.set = function(elem, value) {
    // We can't allow the type property to be changed (since it causes problems in IE)
    if (rtype.test(elem.nodeName) && elem.parentNode) {
        // jQuery.error( "type property can't be changed" );

        // JB: Or ... can it!?
        var $el = $(elem);
        var insertionFn = 'after';
        var $insertionPoint = $el.prev();
        if (!$insertionPoint.length) {
            insertionFn = 'prepend';
            $insertionPoint = $el.parent();
        }

        $el.detach().attr('type', value);
        $insertionPoint[insertionFn]($el);
        return value;

    } else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
        // Setting the type on a radio button after the value resets the value in IE6-9
        // Reset value to it's default in case type is set after value
        // This is for element creation
        var val = elem.value;
        elem.setAttribute("type", value);
        if (val) {
            elem.value = val;
        }
        return value;
    }
}

它通过从文档中删除输入、更改类型然后将其放回原来的位置来解决这个问题。

请注意,这段代码只针对WebKit浏览器进行了测试——对其他任何浏览器都不能保证!

这对我很管用。

$('#newpassword_field').attr("type", 'text');

这是所有IE8爱好者的又一个选择,在新浏览器上也能完美运行。您可以只给文本上色以匹配输入的背景。如果你有一个单一的字段,当你点击/聚焦在该字段上时,这将改变颜色为黑色。我不会在公共站点上使用这个,因为它会“迷惑”大多数人,但我在一个只有一个人可以访问用户密码的ADMIN部分中使用它。

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-OR-

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

这也是需要的,当您离开字段时,将文本更改为白色。简单,简单,简单。

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[另一选择] 现在,如果你有几个字段,你正在检查,都有相同的ID,因为我正在使用它,添加一个类的“pass”字段,你想隐藏的文本。设置密码字段类型为“text”。这样,只有类为“pass”的字段才会被更改。

<input type="text" class="pass" id="inp_2" value="snoogle"/>

$('[id^=inp_]').click(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#000000');
    }
    // rest of code
});

这是第二部分。这将在您离开字段后将文本更改为白色。

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

我喜欢这样改变输入元素的类型:old_input.clone().... 这里有一个例子。有一个复选框“id_select_multiple”。如果将其更改为"selected",则名称为"foo"的输入元素应更改为复选框。如果它得不到检查,他们应该再次成为单选按钮。

  $(function() {
    $("#id_select_multiple").change(function() {
     var new_type='';
     if ($(this).is(":checked")){ // .val() is always "on"
          new_type='checkbox';
     } else {
         new_type="radio";
     }
     $('input[name="foo"]').each(function(index){
         var new_input = $(this).clone();
         new_input.attr("type", new_type);
         new_input.insertBefore($(this));
         $(this).remove();
     });
    }
  )});