0

パスワードフィールドに以下のコードを使用しています。パスワードという単語を表示してから、フィールドをクリックすると、入力されているものはすべて、エントリがドットでマスクされているパスワード形式で実行する必要があります..

私はPHPを使用しています。

コード：

<input type="password" name="password" maxlength="50" id="pass"  
 onclick="this.value='';" onfocus="this.select()"        
 onblur="this.value=!this.value?'Password':this.value;" value="Password">
4

7 に答える 7

3

jQueryを使用してみてください

$(document).ready(function(){
  $('#id_password_field').val('password');        
   $('#id_password_field').click(function(){
       if($(this).val()=='password'){$(this).val('')}
   });
   $('#id_password_field').focus(function(){
       if($(this).val()=='password'){$(this).val('')}
   });
});
于 2011-03-01T20:49:44.920 に答える
3

HTML5 対応のブラウザーの場合は、プレースホルダー属性を次のように使用するだけです。

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

これにより、HTML5 が有効なユーザーには「ここにパスワード」が表示されますが、ユーザーが入力を開始すると、代わりにアスタリスクが表示されます。上記の他の回答は、Javascript関連の回答を示していますが、すぐにそれらも必要なくなります:)

于 2011-03-01T20:52:23.357 に答える
2

そうではありません。JavaScript を使用することは可能です。ここにそれを行う方法に関するチュートリアルがあります。このチュートリアルでは jQuery を使用していますが、独自の JS スクリプトを記述しても同じ結果が得られます。

パスワード入力のjQueryトグル

乾杯

于 2011-03-01T20:46:41.167 に答える
2

これは、さまざまな JavaScript オプションによって完全に可能です。jquery の使用について a.stgeorge が投稿したことを補足するために、独自の JS を作成してそれを行うこともできます。

ここで動作を確認してください: http://www.moditekka.com/pwsample.html

HTML サンプル:

<input type="text" name="inpPass" id="inpPass" value="Password"/>

JavaScript スニペット (これは IE では失敗します。以下を参照してください):

var inpPass = document.getElementById("inpPass");
inpPass.onfocus = function() {
    if(this.getAttribute("type") == "text") {
        this.setAttribute("type", "password");
        this.value = "";
    }
}
inpPass.onblur = function() {
    if(this.value == "") {
        this.value = "Password";
        this.setAttribute("type", "text");
    }
}

編集: 誰かがまだこれを読んでいるなら、要素が DOM に追加された後にのみ "type" プロパティを読み取るというシアトルでの巧妙な決定のおかげで、私のきれいなコードが IE で機能しないことに気付きました。これに対応するために、以下の JavaScript コードを更新しました。

var inpPass = document.getElementById("inpPass");
inpPass.onfocus = function() {
    if(this.getAttribute("type") == "text") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'password');
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
        newInp.focus();
    }
}
inpPass.onblur = function() {
    if(this.value == "") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'text');
        newInp.value = "Password";
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
    }
}
于 2011-03-01T21:07:49.993 に答える
1

tumblr と同じように行うこともできます。基本的に、入力ボックスをラップする div があります。この div には、フォーム ラベルと入力の両方が含まれます。簡単にするために、イメージの変更は無視します。しかし、透明な画像/不透明度を処理して、それを機能させる必要があると思います。ラベルはフォーム入力ボックスの後ろにあるため。

ボックスをクリックしてfirebugを見ると、divの周りに2番目のクラスが追加されます。(これは、この時点で画像と関係があります。) しかし、入力を開始すると、ラベルを表示するように設定する 3 番目のクラスが含まれます: none;

より簡単に要約すると、次のようになります。

Div は、ラベルと入力ボックスをラップします。div は相対的に配置されます。ラベルは絶対に入力ボックスの後ろに配置されます。

onclick を使用して、半透明の状態を追加したり、背景画像を交換したりします。入力を開始すると、ラベルが何も表示されないように設定されます。

于 2011-03-02T01:30:42.383 に答える
1

セキュリティ上の制限により、これは不可能です。

次のスニペットを使用して試すことができます (ただし、機能しません)。

<input type="password" id="inPwd" name="inPwd" propose="Password dummy" />
$("#inPwd").attr("type", "text");
于 2011-03-01T20:44:28.697 に答える
0

純粋なJSで

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head profile="http://gmpg.org/xfn/11">
  <script type="text/javascript">
  function ChangeToPassField() {
    document.getElementById('PasswordField').type="password";
  }
  </script>
  </head>
  <body>
  <input type="text" value="password" id="PasswordField" onfocus="ChangeToPassField()" />
  </body>
  </html>
于 2011-09-20T10:51:03.737 に答える