使用jQuery改变输入字段的类型

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

当前回答

我喜欢这样改变输入元素的类型: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();
     });
    }
  )});

2011-08-22 08:30:59

其他回答

这里有一个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;

2013-06-27 15:59:33

更容易……不需要创建所有动态元素。只需创建两个单独的字段，其中一个为“真实”密码字段(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会将一个元素置于另一个元素之后(呈现空格)，并且当用户进入/退出字段时，字段会出现移动。

2010-02-21 00:51:57

你试过使用.prop()吗?