この記事を書くよう促されたのは、ロシアプレミアリーグのフットボールクラブのサイト管理者との会話でした。 彼がそれを読んで、これを生き返らせることを願っています。現在では、入力フィールドのタイトルがフィールド自体に書き込まれるフォームを作成することが非常にファッショナブルになりました。 たとえば、次のように：
しかし、この場合、パスワードフィールドには何が必要ですか？ 結局、デフォルト値をアスタリスクに置き換えます。
この投稿では、アスタリスクを使用してパスワードフィールドを作成する方法についていくつかのオプションを検討することにしましたが、「パスワード」という単語は表示されていました。
JSなしには方法がないことは明らかです。 すぐに、そのようなJavaScriptをおaびします-非常に長い間、私はJQueryのみを使用して記述しており、純粋なJSで記述することは非常に困難です）
フォームの例
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html lang ="ru" >
< head >
< title > </ title >
< script type ="text/javascript" src ="script.js" ></ script >
</ head >
< body >
< div >
< form action ="index.html" >
< p >
< input type ="text" value ="" class ="authFormInput authFormInputLogin" id ="authFormInputLogin" name ="authFormInputLogin" />
< input type ="text" value ="" class ="authFormInput authFormInputPass" id ="authFormInputPass" name ="authFormInputPass" />
< input type ="submit" value =" " />
</ p >
</ form >
</ div >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
1.交換タイプ
頭に浮かぶ解決策が一番最初です。 フォーカスを設定して削除するときに、入力のタイプを変更するだけです。 コードの始まりは次のようなものです。
window.onload = function () {
window. document .getElementById( 'authFormInputPass' ).onfocus = function () {
this .setAttribute( "type" , "password" );
}
}
* This source code was highlighted with Source Code Highlighter .
しかし、異なるブラウザでチェックを開始すると、誰もがこのコードを理解しているが、IEは理解していないという事実に直面しています。 悲しいです スイープ、さらに考えてください。
2.入力の置換
パスワードの入力の横にテキスト付きの入力を配置して、それらを1つずつ変更してみませんか？
フォームは次のようになります。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html lang ="ru" >
< head >
< title > </ title >
< script type ="text/javascript" src ="script.js" ></ script >
< style type ="text/css" >
.hidden {
display: none;
}
.visible {
display: block;
}
</ style >
</ head >
< body >
< div >
< form action ="index.html" >
< p >
< input type ="text" value ="" class ="authFormInput authFormInputLogin" id ="authFormInputLogin" name ="authFormInputLogin" />
< input type ="text" value ="" class ="authFormInput authFormInputPass visible" id ="authFormInputPassT" name ="authFormInputPassT" />
< input type ="password" value ="" class ="authFormInput authFormInputPass hidden" id ="authFormInputPass" name ="authFormInputPass" />
< input type ="submit" value =" " />
</ p >
</ form >
</ div >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
次のJavaScriptコードは、この全体にまとわりついています。
window.onload = function () {
var authFormInputPass = document .getElementById( 'authFormInputPass' );
var authFormInputPassT = document .getElementById( 'authFormInputPassT' );
authFormInputPassT.onfocus = function () {
authFormInputPassT.className= "authFormInput authFormInputPass hidden" ;
authFormInputPass.className= "authFormInput authFormInputPass visible" ;
authFormInputPass.focus();
}
authFormInputPass.onblur = function () {
if (!authFormInputPass.value) {
authFormInputPass.className= "authFormInput authFormInputPass hidden" ;
authFormInputPassT.className= "authFormInput authFormInputPass visible" ;
}
}
}
* This source code was highlighted with Source Code Highlighter .
そして驚くべきことに、すべてが素晴らしいクロスブラウザで動作します。
検出されたバグ：IE6には小さなレイアウトジャンプがあります。 ただし、レイアウト中に、入力が置かれているコンテナを厳密に修正することができ、これにより負担がかかりません。 さらに、非表示の入力を操作するときのさまざまなパスワードメモの動作は不明です。 10個のOperaで内蔵メモリをテストしました-正常に動作します。
3.写真！
2つの入力に悩まされている場合は、次のオプションを試すことができます。「Background」という単語が書かれているパスワードbackgarundで入力を行い、入力のクラスを変更します。
これがフォームになります：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html lang ="ru" >
< head >
< title > </ title >
< script type ="text/javascript" src ="script.js" ></ script >
< style type ="text/css" >
.noPass {
background-image:url('pass.gif');
}
</ style >
</ head >
< body >
< div >
< form action ="index.html" >
< p >
< input type ="text" value ="" class ="authFormInput authFormInputLogin" id ="authFormInputLogin" name ="authFormInputLogin" />
< input type ="password" value ="" class ="authFormInput authFormInputPass noPass" id ="authFormInputPass" name ="authFormInputPass" />
< input type ="submit" value =" " />
</ p >
</ form >
</ div >
</ body >
</ html >
* This source code was highlighted with Source Code Highlighter .
このすべてのために、ここでそのようなJavaScriptをここに掛けます：
window.onload = function () {
var authFormInputPass = document .getElementById( 'authFormInputPass' );
authFormInputPass.onfocus = function () {
authFormInputPass.className= "authFormInput authFormInputPass" ;
}
authFormInputPass.onblur = function () {
if (!authFormInputPass.value) {
authFormInputPass.className= "authFormInput authFormInputPass noPass" ;
}
}
}
* This source code was highlighted with Source Code Highlighter .
それはまた素晴らしい働きをし、どこにもジャンプしません、メモはバタンと鳴ります。
バグ：
1.異なるブラウザーとOSでの異なるフォントレンダリング。 「パスワード」というテキストが含まれる画像は、ページ上のテキスト全体とは若干異なる場合があります。
2.写真をオフにしてインターネットで作業するユーザー。 しかし、そのような人々の割合は信じられないほど小さいですが、ログインフィールドの次のフィールドがパスワードフィールドであると推測するでしょう。
ちなみに、トピックの冒頭の図では、これはこのメソッドのみを使用して実装されています。