jQueryを使って入力フィールドの型を変更する
$(document).ready(function() {
// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');
});
これは、typepasswordである#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>
ブラウザのセキュリティモデルの一部としてこのアクションが阻止される可能性が非常に高いです。
編集：確かに、今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()" />
そのため、ユーザーが「偽の」パスワードフィールドを入力すると、そのフィールドは非表示になり、実際のフィールドが表示されて、フォーカスが実際のフィールドに移動します。彼らは偽のフィールドにテキストを入力することはできません。
ユーザーが実際のパスワードフィールドを離れると、スクリプトはそれが空かどうかを確認し、空の場合は実際のフィールドを隠して偽のものを表示します。
IEは少し前後に配置され（スペースのレンダリング）、ユーザーが入力または終了したときにフィールドが移動するように見えるため、2つの入力要素の間にスペースを入れないように注意してください。
ワンステップソリューション
$('#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
type property cannot be changedのようなIEのエラーを回避するために、これが下記のように役に立つかもしれません：
非表示の入力で同じイベントをトリガーするために、click/focus/changeイベントを新しい入力要素に添付します。
$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...
古い非表示のinput要素はまだDOMの中にあるので、新しいinput要素によって引き起こされたイベントに反応します。 IDが交換されると、新しいinput要素は古いものと同じように振る舞い、古い隠し入力のIDに対する関数呼び出しに応答しますが、外観は異なります。
少しトリッキーですが動作します！ ;-)
私は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ですが、input要素がある場合のみ"createElementメソッドを使用してドキュメントに追加される前に作成されます。"それでは、要素を複製し、型を変更し、DOMに追加し、古いものを削除することができますか？
すべてのブラウザで機能を必要とするすべての人のためのシンプルなソリューション：
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();
}
});
このセキュリティ対策を回避するために新しいフィールドを作成するだけです。
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はPasswordというテキストを表示しません。また、自動入力がオンになっていると、FFはパスワードを表示します。
それはそれでずっと簡単に動作します。
document.querySelector('input[type=password]').setAttribute('type', 'text');
またパスワードフィールドに戻すには、（パスワードフィールドがテキストタイプの2番目の入力タグであると仮定）
document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')
これは私のために働きました。
$('#newpassword_field').attr("type", 'text');
入力プロパティをテキスト入力に置き換えるかオーバーレイして、送信時にパスワード入力に値を送信する必要がある場合、タイププロパティは変更できません。
私はあなたがWordの "password"を含むbackground-imageを使用して、それを.focus()の空のbackground-imageに戻すことができると思います。
.blur() ----> "password"を含む画像
.focus() -----> "パスワード"のない画像
CSSとjQueryを使ってもできます。パスワードフィールドの上にテキストフィールドを正確に表示させ、hide（）にフォーカスを合わせ（）、パスワードフィールドにフォーカスを置きます。
これを試して
デモはこちら
$(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+'">');
});
これはパスワードフィールドの隣の画像を使ってパスワードを見ること（テキスト入力）とそれを見ないこと（パスワード入力）を切り替える方法です。私は「開いた目」と「閉じた目」の画像を使いますが、あなたはあなたに合ったものなら何でも使うことができます。それが働く方法は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>単にこれ：
this.type = 'password';
といった
$("#password").click(function(){
this.type = 'password';
});
これはあなたの入力フィールドがあらかじめ "text"に設定されていると仮定しています。
これは、文書内の要素の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ブラウザでのみテストされていることに注意してください - それ以外の保証はありません！
これでうまくいくでしょう。現在は無関係な属性を無視するように改善することができますが。
プラグイン
(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");
フィドル：
$('#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'>
これを使うのはとても簡単です
<input id="pw" onclick="document.getElementById('pw').type='password';
document.getElementById('pw').value='';"
name="password" type="text" value="Password" />
jQuery.fn.outerHTML = function() {
return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));
すべての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');
});
[もう1つのオプション]今、使用しているのと同じIDを持つ、チェックするフィールドが複数ある場合は、テキストを非表示にするフィールドに「pass」クラスを追加します。パスワードフィールドは「text」に入力します。このようにして、クラスが 'pass'のフィールドだけが変更されます。
<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
});
これが第二部です。これにより、フィールドを離れた後にテキストが白に戻ります。
$("[id^=inp_]").blur(function() {
if ($(this).hasClass("pass")) {
$(this).css('color', '#ffffff');
}
// rest of code
});
これが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;
入力要素の型を変更するには、このようにします。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();
});
}
)});
テキストとパスワードを切り替える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'));