2

Twitterのログインページでは、入力フィールドのラベルは、javascript/jqueryで一般的なトリックを使用する入力フィールド内に到着します。しかし、私はツイッターのソースを調べて、彼らがそれをどのように行っているかを理解しました。私はonChangeを見つけました：それは親divにクラス'hasome'を追加し、スパンとしてデフォルトのテキストを持っていますが、これは.のようなプロパティを取得することはありませんdisplay:none;。

私は彼らのHTML/CSS / JSを調べようとしましたが、彼らのメソッドを見つけることができませんでした。誰かがツイッターがそれをどのように行っているか教えてもらえますか？

Twitterコードを編集します。

<div class="placeholding-input username hasome">
    <input type="text" class="text-input email-input" name="session[username_or_email]" title="Username or email" autocomplete="on" tabindex="1">
    <span class="placeholder">Username or email</span>
</div>

問題のTwitterHTMLを追加しました。コードを追加すると、親divに「hasome」クラスが1つだけ追加されます。firebugでは、クラス'hassome'に割り当てられたプロパティを確認できませんでした。私の質問は、それを実行しているコード、またはCSSによって実現されている場合はCSSはどこにあるかということです。

4

4 に答える 4

2

これは彼らが行っていることではありませんが、HTML5属性プレースホルダーを使用して同じ結果を達成できます

これは、IEを除くほとんどの主要なブラウザでサポートされていることに注意してください。したがって、これが問題にならない場合は、間違いなくこれを使用できます。

于 2012-09-08T04:10:47.600 に答える
2

フィールド上に絶対位置のスパンを表示し、何かが入力されるとすぐに非表示にします（フィールドが再び空白になったときに再表示します）。すぐに隠れることは、スパンがフィールドを覆い隠すことは問題ではない理由です。奇妙なことに、実際にラベルを使用しているようには見えませんが、使用しない正当な理由はわかりません。

于 2012-09-08T04:12:15.440 に答える
2

それはCSSです。 http://a0.twimg.com/a/1347042098/t1/css/t1_core_logged_out.bundle.cssには次のルールがあります。

.hasome .placeholder{font-size:0!important;z-index:-1;-moz-opacity:0;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);}

.placeholderのいずれかについては、.hasomeにopacity設定されていることに注意してください0。したがって、表示されません。

私がやった方法ではありませんが、少なくとも彼らはそうしています。

于 2012-09-08T04:34:54.593 に答える
2

クラスは親divに適用されますが、子スパンhasomeにCSS値を設定するセレクターで使用されます。したがって、Firebug（またはChromeまたはIEの開発者ツール）では、何が起こっているかを確認するために、divではなくその子スパンを監視する必要があります。

CSSファイルt1_core_logged_out.bundle.cssから、次のルールが適用されていることがわかります。

.has-content .placeholder, .hasome .placeholder
{
    font-size:0!important;
    z-index:-1;
    -moz-opacity:0;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter:alpha(opacity=0);
}

最終的に有効になるルールの部分は「.hasome.placeholder」部分です。スタイル.placeholderの要素にクラス.hasomeの祖先がある場合、さまざまな手法を使用してその子要素を非表示にします。基本的には、親のクラスを使用して、子または子孫のスタイルを制御します。これは、かなり一般的なCSS手法です。

于 2012-09-08T04:37:29.567 に答える