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

29 に答える 29

260

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

編集：実際、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";
于 2009-10-09T14:57:22.000 に答える
84

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

$('#password').get(0).type = 'text';
于 2011-10-03T12:05:39.650 に答える
76

さらに簡単に...すべての動的要素を作成する必要はありません。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 は 1 つを少しずらして (スペースをレンダリングして) 配置し、ユーザーがフィールドに出入りするときにフィールドが移動するように見えるためです。

于 2010-02-21T00:51:57.483 に答える
48

最近では、あなたはただ使うことができます

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

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

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

IE以外のすべてで。IE にもその機能を模倣するプレースホルダー shim があります。

于 2013-02-15T20:12:17.657 に答える
13

よりクロスブラウザなソリューション… この要点が誰かの役に立てば幸いです。

このソリューションは、属性の設定を試み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;
    }
}
于 2011-10-03T16:56:33.567 に答える
9

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

$('#password').replaceWith($('#password').clone().attr('type', 'text'));
于 2012-06-27T01:58:56.970 に答える
6

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 への関数呼び出しに応答しますが、見た目は異なります。

少しトリッキーですが、うまくいきます!!! ;-)

于 2010-01-18T06:22:35.047 に答える
4

私は IE でテストしていません (iPad サイトでこれが必要だったので) - HTML を変更できませんでしたが、JS を追加できるフォーム:

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

(古い学校の JS は、すべての jQuery の次に醜いです!)

ただし、http ://bugs.jquery.com/ticket/1957 は MSDN へのリンクです。ドキュメントに追加される前に。」要素を複製し、タイプを変更し、DOM に追加して、古い要素を削除できますか?

于 2010-12-09T01:09:19.057 に答える
4

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

$('#newpassword_field').attr("type", 'text');
于 2017-12-08T05:52:07.627 に答える
3

このセキュリティの問題を回避するには、新しいフィールドを作成するだけです。

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');
于 2009-10-09T15:00:37.487 に答える
3

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 はパスワードを表示します。

于 2011-07-02T13:49:15.073 に答える
3

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

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();
    }
});
于 2012-02-25T21:38:14.760 に答える
2

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

于 2009-10-09T15:01:09.700 に答える
2

お試しください
デモはこちら

$(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+'">');
});
于 2014-08-25T09:47:32.713 に答える
2

それははるかに簡単に機能します：

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

再びパスワード フィールドに戻すには (パスワード フィールドがテキスト タイプの 2 番目の入力タグであると仮定します):

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')
于 2014-10-21T12:17:23.520 に答える
2

「パスワード」という単語を含む背景画像を使用して、空の背景画像に戻すことができると思います.focus()。

.blur() --> 「パスワード」付きの画像

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

CSS と jQuery を使用して行うこともできます。テキスト フィールドをパスワード フィールドの真上に表示し、hide() を focus() に配置し、パスワード フィールドにフォーカスします...

于 2011-10-28T02:01:02.343 に答える
1 
$('#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'>
于 2011-09-03T14:57:40.517 に答える
1

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 ブラウザーでのみテストされていることに注意してください。それ以外は保証されません!

于 2011-09-04T02:50:45.917 に答える
1

これを使えばとても簡単です

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />
于 2011-03-11T10:29:27.617 に答える
1

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

プラグイン:

(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-27T21:21:33.877 に答える
1

単にこれ：

this.type = 'password';

そのような

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

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

于 2012-02-13T17:26:34.390 に答える
1 
jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));
于 2011-10-12T11:29:15.220 に答える
1

パスワード フィールドの横にある画像を使用して、パスワードの表示 (テキスト入力) と非表示 (パスワード入力) を切り替える方法を次に示します。「開いた目」と「閉じた目」のイメージを使用していますが、お好みで構いません。それが機能する方法は、2 つの入力/画像を持ち、画像をクリックすると、値が表示されている入力から非表示の入力にコピーされ、それらの可視性が交換されます。ハードコーディングされた名前を使用する他の多くの回答とは異なり、これはページで複数回使用するのに十分一般的です。また、JavaScript が利用できない場合は、正常に機能が低下します。

これらのうちの 2 つがページ上でどのように見えるかを次に示します。この例では、Password-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>

于 2016-12-24T13:11:31.280 に答える
1

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

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

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

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

于 2020-04-18T21:12:01.037 に答える
0

入力要素の型を変更するには、この方法が好きです: 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-22T08:30:59.613 に答える
0

テキストとパスワードを切り替える 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'));

于 2014-03-12T02:20:46.137 に答える