使用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>

当前回答

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

2009-10-09 15:01:09

其他回答

这样就可以了。尽管可以改进为忽略现在不相关的属性。

插件:

(function($){
  $.fn.changeType = function(type) {  
    return this.each(function(i, elm) {
        var newElm = $("<input type=\""+type+"\" />");
        for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
            var attribute = elm.attributes[iAttr].name;
            if(attribute === "type") {
                continue;
            }
            newElm.attr(attribute, elm.attributes[iAttr].value);
        }
        $(elm).replaceWith(newElm);
    });
  };
})(jQuery);

用法:

$(":submit").changeType("checkbox");

小提琴:

http://jsfiddle.net/joshcomley/yX23U/

2011-10-27 21:21:33

这样工作起来更容易:

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

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

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

2014-10-21 12:17:23

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

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

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

这很有效。

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

2020-04-18 21:12:01

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

编辑:实际上，现在在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";

2009-10-09 14:57:22

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

推荐文章

最新文章

标签