Javascript：クリック時にテキストボックス 'タイプ'を変更する

私は自分のサイトにユーザーがログインする部分を持っていますが、テキストボックスにデフォルト値を設定したいと思いますが、 "をクリックすると、文字を非表示にします。このIMOの素晴らしい例は、Appleのwww.me.comのWebサイトにあります。実装にはどのような助けがありますか？Javascript：クリック時にテキストボックス 'タイプ'を変更する

出典

2011-08-14 Zakman411

一つの方法は、その後、ユーザーがコントロールに入った...それのデフォルト値を持つコントロールを表示することで、それを隠し、その時点で実際のパスワードコントロールを表示します。ユーザーがパスワードコントロールを離れたときに、実際に値を入力しなかった場合、または既存の値を削除した場合は、最初のコントロールを再度表示してパスワードコントロールを非表示にします。ここでは例のコードは次のとおりです。

<html> 
<head> 
    <script language="ecmascript"> 
     function HandlePasswordOnFocus() { 
      if ("none" != TheForm.a.style.display) { 

       TheForm.a.style.display = "none"; 
       TheForm.b.style.display = "block"; 
       TheForm.b.focus(); 
      } 
     } 
     function HandlePasswordOnBlur() { 
      if ("" === TheForm.b.value) { 
       TheForm.b.style.display = "none" 
       TheForm.a.style.display = "block"; 
      } 
     } 
    </script> 
</head> 
<body> 
    <form name="TheForm"> 
    <input id="a" value="password" onfocus="HandlePasswordOnFocus()" /> 
    <input id="b" type="password" style="display: none" onblur="HandlePasswordOnBlur()" /> 
    </form> 
</body> 
</html>

出典

2011-08-14 20:01:17

タイプを変更するという考えは、のほとんどのブラウザではとなります。しかし、古いバージョンのIEでは、入力制御のタイプを動的に変更することができないため、プロセス内の情報を失う可能性のある複雑なノード置換が行われます。むしろ、新しいHTML5 placeholderプロパティを使用する必要があります。このプロパティはすべてのブラウザでは機能しませんが、この置換を実行するために必要なスクリプトよりもはるかに明白です。

<input type="password" name="pwd" value="" placeholder="Enter your password." />

これはFirefox 3.7以上、Chrome、Safari 4以上、IE9以上と互換性があります。

出典

2011-08-14 19:48:39 Ryan

優れています。それはうまくいくはずですが、HTML5以外のブラウザではどうなりますか？ – Zakman411

@ Zakman411：プレースホルダテキストは表示されません。何も壊れません。それは優雅に劣化する。 – Ryan

型を変更したい場合は、ユーザーがテキストボックスをクリックしたときにjavascript関数を使用して型を変更することができます。

<script type="text/javascript"> 
function changeType() { 
    document.getElementById("password").type = "password"; 
    document.getElementById("password").value = ""; 
} 
</script> 
<input type="text" id="password" name="password" value="Password" onClick="changeType()" />

しかし、他のポスターが示唆しているように - プレースホルダプロパティの使用を検討してください。

出典

2011-08-14 19:50:33 w0bni

IEで悲惨に失敗します（スクリプトの残りの部分が壊れてしまう）ので、警告してください... – Ryan

例：http://jsfiddle.net/n3SPH/

<label for="placeholder">Password:</label> 
<input type="text" id="placeholder" value="Enter password here" onFocus="setPass();"/> 
<input type="password" id="password" value="" onBlur="checkPass();" style="display: none;"/>

JS：これを行うには

function setPass() { 
    document.getElementById('placeholder').style.display = 'none'; 
    document.getElementById('password').style.display = 'inline'; 
    document.getElementById('password').focus(); 
} 
function checkPass() { 
    if (document.getElementById('password').value.length == 0) { 
     document.getElementById('placeholder').style.display = 'inline'; 
     document.getElementById('password').style.display = 'none'; 
    } 
}

出典

2011-08-14 19:52:53 Baz1nga

これはうまくいきましたが、/ idは以前と同じようにチェックされていますが、理由についてのアイデアは何ですか？ – Zakman411

@ Zakman411：このコード例では、入力コントロールの名前を指定せず、適切な 'name'属性を追加しています。（もちろん、フォームに実際に提出の兆候がない場合は、それはあなたの問題ではありません...） – Ryan

AppleはMe.comでそれをやっている方法は、彼らが透明になるように、入力フィールドを設定し、彼らが表示するテキストとその背後にDIVを持っています。誰かがフィールドに入力を開始すると、その背後にあるラベルdivを非表示にします。

placeholder=""を使用したくないという人もいます（私は、Safariがサポートして以来、アップルがそれをしていない理由を知りませんでした）、別の方法として、そのフィールドの背景とプレースホルダテキストを入力してから、誰かが入力を開始するときにCSSプロパティbackground:noneを持つクラスを与えます。それは、余分なマークアップを必要としませんでした（ただし、Photoshopではもっとびっくりします...）。

出典

2011-08-14 21:40:21

Javascript：クリック時にテキストボックス 'タイプ'を変更する

答えて

関連する問題