web-dev-qa-db-ja.com

jQuery変更入力タイプ

input type属性をpasswordからtextに変更しようとしています。

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

なぜこれが機能しないのですか？

jqueryattributes
32
James

JQueryでこれを行うことはできません。 明示的に禁止 IEはサポートしていません（エラーが表示されるコンソールを確認してください。

入力を削除して、新しい入力を作成する必要がある場合は、たとえば次のようにします。

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

ここで試してみることができます

制限を明確にするために、jQueryは<button>または<input>のtypeの変更を許可しないため、動作はブラウザー間で一貫しています（IE =それを許可しない、彼らはそれがどこでも禁止されていると判断した）。コンソールでこのエラーを取得しようとすると：

エラー：typeプロパティは変更できません

52
Nick Craver

私の解決策：

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

代わりにpropを使用してくださいattr

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

私はゲームに少し遅れていることを知っていますが、IE9でこれを行うことができました（Microsoftはそれを許可することを決めたようです）。しかし、私はまっすぐな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();
10
JasCav

これは簡単に機能するはずです。

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

2018年であり、jQueryはこの機能を現在サポートしています。以下が機能します：

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

これを実現するパラメーターとしてセレクターの配列を受け入れる2つの関数を次に示します。

  // 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);
0
Pat

これはとても簡単です。これはかなりうまくいきます。

 $('#btn_showHide').on('click', function() {
    if($(this).text() == 'Show')
    {
      $(this).text('Hide');
      $('#code').attr('type', 'text');
    }
    else
    {
      $(this).text('Show');
      $('#code').attr('type', 'password');
    }
  });
0
Haze Erasmo
function passShowHide(){
  if( $("#YourCheckBoxID").prop('checked') ){
    document.getElementById("EnterPass").attributes["type"].value = "text";
  }
  else{
    document.getElementById("EnterPass").attributes["type"].value="password";}
0
Viktor