jQuery更改输入类型答案

【问题标题】：jQuery change input typejQuery更改输入类型
【发布时间】：2011-04-02 06:35:29
【问题描述】：

尝试将input 类型属性从password 更改为text。

$('.form').find('input:password').attr({type:"text"});

为什么这不起作用？

【问题讨论】：

仅供参考，您可以使用.attr('attrname', 'newvalue') 设置单个属性。
重复stackoverflow.com/questions/1544317/…
@thisgeek 你为一个两年多以前的问题和三年前的问题发布了重复链接，这给我留下了深刻的印象。
现在可以了。

标签： jquery attributes

【解决方案1】：

我的解决方案：

    $('#myinput').clone().attr('type','tel').insertAfter('#myinput').prev().remove();

【讨论】：

非常优雅和简单:)
不错的解决方案，虽然根据接受的答案，如果您将事件附加到原始输入，这些事件也会被删除......
.attr() 如何作用于克隆的元素而不作用于元素本身？
因为克隆的元素还没有注入到DOM中，而元素本身已经在DOM中了。
完美解决方案！谢谢。

【解决方案2】：

你不能用 jQuery 做这个，it explicitly forbids it 因为 IE 不支持它（检查你的控制台你会看到一个错误。

如果这是您所追求的，您必须删除输入并创建一个新输入，例如：

$('.form').find('input:password').each(function() {
   $("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();

You can give it a try here

为了明确限制，jQuery 不允许在 <button> 或 <input> 上更改 type，因此行为是跨浏览器一致的（因为 IE 不允许这样做，他们决定在任何地方都不允许这样做） .尝试时，您会在控制台中收到此错误：

错误：类型属性无法更改

【讨论】：

@Andy - 它不会让你的身体和元数据混淆吗？ :)
@Nick，我不敢编辑你的代码，但我想你打错了：.inserBefore(this)
@ricebowl - 您可以在看到错误时编辑掉，或者发布更正确的答案：）感谢您的评论，已修复！
现在是 2016 年，jQuery 现在允许更改属性。
$(element).attr('type', 'text');

【解决方案3】：

使用prop 代替attr

$('.form').find('input:password').prop({type:"text"});

【讨论】：

【解决方案4】：

我知道我玩游戏有点晚了，但我只能在 IE9 中做到这一点（微软似乎决定允许这样做？）。但是，我必须直接使用 JavaScript。这只是一个带有下拉列表的表单示例，该下拉列表会根据下拉列表中选择的内容更改字段类型。

function switchSearchFieldType(toPassword) {
    $('#SearchFieldText').val('');
    if (toPassword === true) {
        $('#SearchFieldText').get(0).setAttribute('type', 'password');
    } else {
        $('#SearchFieldText').get(0).setAttribute('type', 'text');
    }
}

$('#SelectedDropDownValue').change(function () {
    if ($("select option:selected").val() === 'password') {
        switchSearchFieldType(true);
    }
    else {
        switchSearchFieldType(false);
    }
}).change();

【讨论】：

我喜欢这个解决方案，因为不破坏原始输入会使任何附加事件保持不变...

【解决方案5】：

现在是 2018 年，jQuery 现在确实支持此功能。以下将起作用：

$('.form').find('input:password').attr("type","text");

【讨论】：

【解决方案6】：

这应该很容易工作。

$("selector").attr('type', 'hidden'); 
//Changing it to hidden

【讨论】：

【解决方案7】：

    //Get current input object
    var oldInput = $('foo');
    //Clone a new input object from it
    var newInput = oldInput.clone();
    //Set the new object's type property
    newInput.prop('type','text');
    //Replace the old input object with the new one.
    oldInput.replaceWith(newInput);

【讨论】：

【解决方案8】：

这里有两个函数，接受一个选择器数组作为参数来完成这个：

  // Turn input into Number keyboard
  function inputNumber(numArr) {
    if (numArr instanceof Array) {
      for (var i = 0; i < numArr.length; i++) {
        if ($(numArr[i]).length > 0) {
          var copy = $(numArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }
  // Turn input into Email keyboard 
  function inputEmail(emailArr) {
    if (emailArr instanceof Array) {
      for (var i = 0; i < emailArr.length; i++) {
        if ($(emailArr[i]).length > 0) {            
          var copy = $(emailArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }

然后你可以这样使用：

  var numberArr = ["#some-input-id", "#another-input-id"];
  var emailArr = ["#some-input-id", "#another-input-id"];

  inputNumber(numberArr);
  inputEmail(emailArr);

【讨论】：

【解决方案9】：

function passShowHide(){
  if( $("#YourCheckBoxID").prop('checked') ){
    document.getElementById("EnterPass").attributes["type"].value = "text";
  }
  else{
    document.getElementById("EnterPass").attributes["type"].value="password";}

【讨论】：

这实际上并没有回答问题。问题是如何改变type，而这段代码改变了value，它甚至做得很糟糕。这可能是一个完全不同的问题的合适答案，但不适用于这个问题。

【解决方案10】：

这很容易。这很好用。

 $('#btn_showHide').on('click', function() {
    if($(this).text() == 'Show')
    {
      $(this).text('Hide');
      $('#code').attr('type', 'text');
    }
    else
    {
      $(this).text('Show');
      $('#code').attr('type', 'password');
    }
  });

【讨论】：