3

入力のタイトルがテキストボックスにあるサインアップフォームがあり、ボックスをクリックするとテキストが消えますが、パスワードでは、プレビューテキストを「••」ではなく「パスワード」のままにします。 ••••••"。ただし、ユーザーがテキストボックスをクリックすると、テキストがクリアされ、入力されたテキストは「•••••••」と表示されます。

ボタンのコードは次のとおりです。

<form method="post" action="register_process.php">
    <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
    <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
    <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD';}" name="password"  />
    <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM';}" name="password_confirm"  />    <br/>
    <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

他のすべては正常に機能しますが、ユーザーのパスワードが表示されないようにしたいと思います。また、今のところ、パスワードフィールドはテキストのままにしておきます。

アクションを確認するには、こちらをご覧ください：http: //jsfiddle.net/e458S/

ありがとう。

4

3 に答える 3

9

javascriptを使用できますsetAttribute

<form method="post" action="register_process.php">
   <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
   <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
   <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD') {this.value = ''; setAttribute('type', 'password');}"   onblur="if (this.value == '') {this.value = 'PASSWORD';setAttribute('type', 'text');}" name="password"  />
   <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = ''; setAttribute('type', 'password');}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM'; setAttribute('type', 'text');}" name="password_confirm"  />   <br/>
   <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

ここの例

最後に、パスワードを入力したときに1つの間違いを見つけました。その前に、フォーカスを別のフィールドに変更してパスワードに戻ると、フィールドがクリアされます。これは onclick="this.value=''";、イベントonclickを処理する場合this.value=''は、onfocusで機能するため削除するか、条件を追加するだけですif(this.value=='password')。それ以外の場合、onfocusと同じonclickイベントを使用する場合は、onclickイベントハンドラーを削除する方がよいでしょう。onfocusで十分です。

于 2013-03-09T00:09:02.330 に答える
3

次の点に注意してください。

  • パスワードフィールドは、である必要がありinput type='password'ます。これにより、ブラウザはさまざまなセキュリティ上の考慮事項（コピーを許可しないなど）を適用できます。さらに、タッチデバイスは、使いやすさの目的でパスワードの表示/非表示を選択的に提供する場合があります。

  • できれば、スクリプトはインラインにしないでください。代わりに、適切な要素に接続する控えめなJavaScriptをお勧めします。

  • 人々はあらゆる種類の入力メカニズムを使用します。

サポートされていないplaceholder場合に表示を変更できるように、機能検出を備えたHTML属性をお勧めします。placeholder

簡単な例： http： //jsfiddle.net/fbw7j/3/

<input type="password" placeholder="enter a password">

// feature detection using the Modernizr library
if(!Modernizr.input.placeholder){
    // alter your markup
    $("input[type=password]").after("<span>Password</span>");
}
于 2013-03-09T00:29:10.153 に答える
0

http://jsfiddle.net/e458S/39/を見てください

<input type="text" class="button" value="PASSWORD-OK" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD-OK') {this.value = ''; this.type='password';}" onblur="if (this.value == '') {this.value = 'PASSWORD-OK'; this.type='text';}" name="password"/>

ただし、プレースホルダーでの使用も問題ありません。

<input type="password" placeholder="enter a password">
于 2014-11-20T21:59:59.747 に答える