css/javascript form onfocusプレースホルダーのテキストが入力中に消えてしまう

Question

私はちょうどwww.tumblr.comのようなフォームを作る方法を考えようとしています。 onFocusプレースホルダは入力ボックスに残りますが、入力が開始されるとプレースホルダテキストが消去されます。私はhereという別のチュートリアルでonFocusを実行する方法を知っていますが、その背景テキストonFocusをどう保持しているのだろうと思っていましたが、入力時にのみ変更します。

Answer 1

彼らは、テキストを変更するためにonFocusトリックを使用していません。実際には、2つの絶対的に配置されたブロック要素を別々の相対的に配置されたブロック要素内に重ねて配置しています。

次に、彼らはonKeyUpまたは同様のイベントを待って、 "label"要素を隠します。

FirefoxでFirebugを使用している場合は、効果を生成するノードとCSSを確認するのは簡単です。あなたがスタイルに必要な、彼らはかなり見えるように、これらの要素を微調整します

HTML

<div class="input_wrapper"> 
    <label for="user_email">Email</label> 
    <input type="text" id="user_email" name="user_email" /> 
</div> 

CSS

.input_wrapper { 
    position: relative; 
} 
.input_wrapper label { 
    position: absolute; 
    top: 2px; 
    left: 5px; 
    z-index: 1; /* stack below input */ 
} 
.input_wrapper_focused label { 
    /* style label for focused input */ 
} 
.input_wrapper_notempty label { 
    visibility: hidden; 
} 
.input_wrapper input { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; /* stack above input */ 
} 

：それは次のようになります。また、ラベルを最初に置くほどスマートなので、画面リーダーは正しい順序でコンテンツを表示します。

は、次に、あなたのJavaScriptライブラリまたは非ライブラリーの決定に依存して入力フィールドの変更とkeyUpイベント、上input_wrapper_focus/notemptyクラスを追加および削除するJSを追加する必要があります。