パスワードフィールドの透かしテキスト

Question

私は1ページに1つのパスワードフィールドを持っています。パスワードを入力する前に、画面上のパスワード欄に透かしテキスト「パスワードを入力」を表示したい場合は、パスワードタイプとしてテキストを表示します。 javascriptを使用してこの問題を解決するにはどうすればよいですか？

Answer 1

したがって、以下のコードは、通常の入力フィールド用の単純なjQueryマスクです。しかし、文字がマスクされているため、これはパスワードフィールドでは機能しません！そうすれば、これを拡張する2つの方法が考えられます。 1つは自分でマスク機能を書くことです。したがって、通常の入力フィールドを使用しますが、入力時に文字をマスクします。もう1つは、パスワードフィールドに通常のテキストボックスをオーバーレイし、それを非表示にするか、またはクリックしたときにzオーダーを変更することです。コメント内でjQueryを使用していないと言いましたが、その他。申し訳ありませんが、私はあなたのユースケースのコードを持っていません！

/* Newsletter Sign Up Functions*/ 
    /* Toggle field descriptions as they are clicked in and out of */ 
    //set default input values because Firefox is stupid and doesn't reset them 
    $("#newsletterform input[name=first]").val('First Name'); 
    $("#newsletterform input[name=last]").val('Last Name'); 
    $("#newsletterform input[name=email]").val('E-mail Address'); 

    //store default input values 
    $("#newsletterForm input:text").each(function() { 
     $.data(this, "initialval", $(this).val()); 
    }); 
    //clear values on focus 
    $("#newsletterForm input:text").focus(function() { 
     if ($.data(this, "initialval") == $(this).val()) { $(this).val(""); } 
    }); 
    //restore value on lost focus 
    $("#newsletterForm input:text").blur(function() { 
     if ($(this).val() == "") { $(this).val($.data(this, "initialval")); } 
    }); 
    /* End toggle field descriptions */ 

Answer 2

jQueryの透かし機能を試してください。 http://code.google.com/p/jwatermark/

Answer 3

最も簡単な方法は、パスワードフィールドの透かし入れを可能にするjQueryプラグインを使用することです。私はthis pluginを使って素早くGoogle検索を行った。

jQueryプラグインを使用しない場合、必要なのは2つのHTML入力、1つは表示、もう1つは非表示です。隠されたものにはサーバーに戻す実際の値が含まれていますが、目に見えるものはjavascriptで操作してユーザーが対話するものです。次の部分は、2つの入力を一緒に操作することです。あなたの目に見えるパスワード入力が空の場合

が

• 、それは テキストや透かしを表示しますが、空の隠し入力を残すように入力します変更：ここで私はコードに考えることができます重要な部分です。
• ユーザーがフォーカスしている場合は、ウォーターマークを非表示にして、 のパスワードに切り替えます。
• 入力時に、値を非表示フィールドにコピーします。
• 入力を終了してテキストがない場合は、タイプを テキストに戻して、透かしをもう一度表示します。

プラグインを試してみるか、javascriptを自分でコーディングしてみてください。

Answer 4

このjQueryプラグインは、積極的に維持され、新しいHTML5の入力フィールドを処理している：http://code.google.com/p/jquery-watermark/

Answer 5

あなただけが入力にplaceholder属性を使用することができ、より新しいブラウザをサポートする必要がある場合。

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

それとも、スクリプトでそれを設定する必要がある場合だけ

input.placeholder =​​​​​​​ "Insert Password"; 

はhttp://jsfiddle.net/xECqY/を参照してくださいます。