jQueryで入力フィールドのタイプを変更する

$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

これは、通常のテキストフィールドである#password（を使用してid="password"）入力フィールドを変更type 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>

このアクションは、ブラウザのセキュリティモデルの一部として阻止されている可能性が非常に高いです。

編集：実際、Safariで今すぐテストすると、エラーが発生しますtype property cannot be changed。

編集2：それはjQueryから直接のエラーのようです。次のストレートDOMコードを使用すると、問題なく機能します。

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

編集3：jQueryソースから直接、これはIEに関連しているようです（バグまたはセキュリティモデルの一部である可能性がありますが、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";

さらに簡単です...動的な要素をすべて作成する必要はありません。2つの個別のフィールドを作成し、1つを「実際の」パスワードフィールド（type = "password"）に、もう1つを「偽の」パスワードフィールド（type = "text"）にして、偽のフィールドのテキストを薄い灰色に設定し、初期値を「パスワード」に設定します。次に、以下のように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()" />

したがって、ユーザーが「偽の」パスワードフィールドを入力すると、非表示になり、実際のフィールドが表示され、フォーカスが実際のフィールドに移動します。偽のフィールドにテキストを入力することはできません。

ユーザーが実際のパスワードフィールドを離れると、スクリプトはそれが空かどうかを確認し、空の場合は実際のフィールドを非表示にして偽のフィールドを表示します。

2つの入力要素の間にスペースを残さないように注意してください。IEは少しずつ前後に配置し（スペースをレンダリング）、ユーザーがフィールドを入力/終了するとフィールドが移動して見えるようになります。

ワンステップソリューション

$('#password').get(0).type = 'text';

今日、あなたはただ使うことができます

$("#password").prop("type", "text");

しかし、もちろん、あなたは本当にこれを行うべきです

<input type="password" placeholder="Password" />

IE以外のすべて。IEの機能を模倣するプレースホルダーシムもあります。

よりクロスブラウザのソリューション…この要旨が誰かを助けてくれることを願っています。

このソリューションはtype属性を設定しようとし、失敗した場合は、単に<input>要素の属性とイベントハンドラーを保持したまま、新しい要素を作成します。

changeTypeAttr.js（GitHub Gist）：

/* x is the <input/> element
   type is the type you want to change it to.
   jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
    x = $(x);
    if(x.prop('type') == type)
        return x; //That was easy.
    try {
        return x.prop('type', type); //Stupid IE security will not allow this
    } catch(e) {
        //Try re-creating the element (yep... this sucks)
        //jQuery has no html() method for the element, so we have to put into a div first
        var html = $("<div>").append(x.clone()).html();
        var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
        //If no match, we add the type attribute to the end; otherwise, we replace
        var tmp = $(html.match(regex) == null ?
            html.replace(">", ' type="' + type + '">') :
            html.replace(regex, 'type="' + type + '"') );
        //Copy data from old element
        tmp.data('type', x.data('type') );
        var events = x.data('events');
        var cb = function(events) {
            return function() {
                //Bind all prior events
                for(i in events)
                {
                    var y = events[i];
                    for(j in y)
                        tmp.bind(i, y[j].handler);
                }
            }
        }(events);
        x.replaceWith(tmp);
        setTimeout(cb, 10); //Wait a bit to call function
        return tmp;
    }
}

これは私にとってはうまくいきます。

$('#password').replaceWith($('#password').clone().attr('type', 'text'));

jQueryを使用するための究極の方法：

元の入力フィールドは画面から非表示のままにします。

$("#Password").hide(); //Hide it first
var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use
$("#Password").attr("id","Password_hidden"); //Change ID for hidden input

JavaScriptを使って新しい入力フィールドをその場で作成します。

var new_input = document.createElement("input");

IDと値を非表示の入力フィールドから新しい入力フィールドに移行します。

new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input
new_input.setAttribute("type","text"); //Set proper type
new_input.value = $("#Password_hidden").val(); //Transfer the value to new input
$("#Password_hidden").after(new_input); //Add new input right behind the hidden input

IEのようなエラーを回避するには type property cannot be changedに役立つことがあります：

非表示の入力で同じイベントをトリガーするために、クリック/フォーカス/変更イベントを新しい入力要素にアタッチします。

$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...

古い非表示の入力要素はまだDOM内にあるため、新しい入力要素によってトリガーされたイベントに反応します。IDが交換されると、新しい入力要素は古い要素と同様に機能し、古い非表示の入力のIDに対する関数呼び出しに応答しますが、見た目は異なります。

少しトリッキーですが動作します!!! ;-)

.prop（）を使用してみましたか？

$("#password").prop('type','text');

http://api.jquery.com/prop/

私はIEでテストしていません（iPadサイトにこれが必要だったため）-HTMLを変更することはできませんが、JSを追加することができます。

document.getElementById('phonenumber').type = 'tel';

（古いJSはすべてのjQueryの隣に醜いです！）

ただし、http：//bugs.jquery.com/ticket/1957はMSDNにリンクしています。「Microsoft Internet Explorer 5では、typeプロパティはread / write-onceですが、createElementメソッドで入力要素が作成され、ドキュメントに追加される前。」要素を複製してタイプを変更し、DOMに追加して古い要素を削除することができますか？

このセキュリティを回避するために新しいフィールドを作成するだけです：

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');

Firefox 5でこれを実行しようとすると、同じエラーメッセージが表示されました。

以下のコードを使用して解決しました：

<script type="text/javascript" language="JavaScript">

$(document).ready(function()
{
    var passfield = document.getElementById('password_field_id');
    passfield.type = 'text';
});

function focusCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == defaultValue)
    {
        field.value = '';
    }
    if (type == 'pass')
    {
        field.type = 'password';
    }
}
function blurCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == '')
    {
        field.value = defaultValue;
    }
    if (type == 'pass' && field.value == defaultValue)
    {
        field.type = 'text';
    }
    else if (type == 'pass' && field.value != defaultValue)
    {
        field.type = 'password';
    }
}

</script>

それを使用するには、フィールドのonFocus属性とonBlur属性を次のように設定するだけです。

<input type="text" value="Username" name="username" id="username" 
    onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
    onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">

<input type="password" value="Password" name="pass" id="pass"
    onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
    onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

これはユーザー名フィールドにも使用するため、デフォルト値を切り替えます。関数を呼び出すときに、関数の2番目のパラメーターを ''に設定するだけです。

また、ユーザーがJavaScriptを有効にしていない場合や何か問題が発生した場合でも、パスワードが引き続き保護されている場合に備えて、私のパスワードフィールドのデフォルトタイプは実際にはパスワードであることにも注意してください。

$（document）.ready関数はjQueryであり、ドキュメントの読み込みが完了すると読み込まれます。これにより、パスワードフィールドがテキストフィールドに変更されます。明らかに 'password_field_id'をパスワードフィールドのIDに変更する必要があります。

コードを自由に使用および変更してください！

これが私と同じ問題を抱えていたすべての人に役立つことを願っています:)

-CJケント

編集：良い解決策ですが絶対的ではありません。FF8およびIE8で動作しますが、Chrome（16.0.912.75 ver）では完全には動作しません。Chromeは、ページの読み込み時にパスワードテキストを表示しません。また、自動入力をオンにすると、FFにパスワードが表示されます。

すべてのブラウザーで機能を必要とするすべての人のためのシンプルなソリューション：

HTML

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

jQuery

$("#passwordSwitch").change(function(){
    var p = $('#password');
    var h = $('#passwordHide');
    h.val(p.val());
    if($(this).attr('checked')=='checked'){
        h.hide();
        p.show();
    }else{
        p.hide();
        h.show();
    }
});

これは私のために働いた。

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

タイププロパティは変更できません。入力をテキスト入力で置き換えるかオーバーレイして、送信時に値をパスワード入力に送信する必要があります。

「password」という単語を含むbackground-imageを使用して、で空のbackground-imageに戻すことができると思います.focus()。

.blur() ---->「パスワード」を含む画像

.focus() ----->「パスワード」のない画像

また、CSSとjQueryを使用してそれを行うこともできます。テキストフィールドをパスワードフィールドの上に正確に表示し、hide（）はfocus（）にあり、パスワードフィールドにフォーカスします...

このデモを試してみてください

$(document).delegate('input[type="text"]','click', function() {
    $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">');
}); 
$(document).delegate('input[type="password"]','click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
}); 

それははるかに簡単に動作します：

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

パスワードフィールドに戻すには、（パスワードフィールドがテキストタイプの2番目の入力タグであると仮定します）：

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

これを使うととても簡単です

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />

$('#pass').focus(function() { 
$('#pass').replaceWith("<input id='password' size='70' type='password' value='' name='password'>");
$('#password').focus();
});

<input id='pass' size='70' type='text' value='password' name='password'>

jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

これでうまくいきます。現在は無関係な属性を無視するように改善することはできますが。

プラグイン：

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

単にこれ：

this.type = 'password';

といった

$("#password").click(function(){
    this.type = 'password';
});

これは、事前に入力フィールドが「テキスト」に設定されていることを前提としています。

これは、typeドキュメントの要素のを変更できる小さなスニペットです。

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;
    }
}

inputドキュメントからを削除し、を変更してから、type元の場所に戻すことで問題を回避します。

このスニペットはWebKitブラウザーでのみテストされていることに注意してください。

パスワードフィールドの横にある画像を使用して、パスワードの表示（テキスト入力）と表示しない（パスワード入力）を切り替える方法を次に示します。私は「開いた目」と「閉じた目」の画像を使用していますが、あなたの好きなものを使うことができます。それが機能する方法は、2つの入力/画像があり、画像をクリックすると、値が表示されている入力から非表示の入力にコピーされ、その表示が入れ替わります。ハードコードされた名前を使用する他の多くの回答とは異なり、これは1つのページで複数回使用するのに十分一般的です。また、JavaScriptが使用できない場合は、正常に低下します。

以下は、これらの2つがページ上でどのように見えるかです。この例では、パスワードAは目をクリックすることで明らかになっています。

$(document).ready(function() {
  $('img.eye').show();
  $('span.pnt').on('click', 'img', function() {
    var self = $(this);
    var myinp = self.prev();
    var myspan = self.parent();
    var mypnt = myspan.parent();
    var otspan = mypnt.children().not(myspan);
    var otinp = otspan.children().first();
    otinp.val(myinp.val());
    myspan.hide();
    otspan.show();
  });
});

img.eye {
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
<b>Password-A:</b>
<span class="pnt">
<span>
<input type="password" name="passa">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>

<form>
<b>Password-B:</b>
<span class="pnt">
<span>             
<input type="password" name="passb">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span> 
<span style="display:none">            
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span> 
</span>
</form>

入力エレメントのタイプを変更するには、この方法が好きです：old_input.clone（）....これが例です。「id_select_multiple」というチェックボックスがあります。これを「選択」に変更した場合、「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();
     });
    }
  )});

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;

テキストとパスワードを切り替えるjQuery拡張機能を作成しました。IE8で動作し（おそらく6＆7も同様ですが、テストされていません）、値や属性を失うことはありません。

$.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();2つを切り替えたり、別の何か（チェックボックスなど）に基づいてアクションを「強制」するオプションを指定したりできます。$('#element').togglePassword($checkbox.prop('checked'));

すべてのIE8愛好家のためのちょうど別のオプションであり、それは新しいブラウザーで完璧に動作します。入力の背景に一致するようにテキストに色を付けることができます。フィールドが1つしかない場合、フィールドをクリックまたはフォーカスすると、色が黒に変わります。ほとんどの人を「混乱」させるので、私はこれを公開サイトでは使用しませんが、1人のユーザーだけがユーザーのパスワードにアクセスできるADMINセクションで使用しています。

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

-または-

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

これも必要であり、フィールドを離れるとテキストが白に戻ります。シンプル、シンプル、シンプル。

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

[別のオプション]次に、チェックするフィールドが複数あり、すべて同じIDを使用している場合は、私が使用しているように、テキストを非表示にするフィールドに「パス」のクラスを追加します。パスワードフィールドのタイプは「テキスト」です。このようにして、「合格」のクラスを持つフィールドのみが変更されます。

<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
});

これは、これの2番目の部分です。これにより、フィールドを離れると、テキストが白に戻ります。

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

入力のタイプを変更するために、次のことを行いました。

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

そしてそれは動作します。

ASP NET Core 3.1プロジェクトでjQuery UI datepickersを使用していて、Chromiumベースのブラウザーで正しく動作しなかったため、これを行う必要がありました（https://stackoverflow.com/a/61296225/7420301を参照）。