0

<input>HTML5 のようなプレースホルダーが必要な要素がいくつかあります。入力にテキストがない場合にのみ、フォーカス時に消え、ぼかし時に再表示される種類。私は JavaScript を多用する実装をいくつか見てきましたが、軽量 (できれば css のみ) のソリューションを探していました。

HTMLは次のとおりです。

<div class="email-container">
    <span class="default-value">Email</span>
    <input class="text-input" name="login" type="email"/>
</div>
<div class="pw-container">
    <span class="default-value">Password</span>
    <input class="text-input" name="login" type="pw"/>
</div>
4

2 に答える 2

1

Modernizer プロジェクトには、クロス ブラウザー HTML5 ポリフィルの優れたリストがあります: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

そのページに移動し、「Web フォーム : 入力プレースホルダー」までスクロールすると、探しているものを正確に実行する多数の優れたプロジェクトが表示されます。

于 2012-11-29T22:34:01.250 に答える
1

私の法案に完全に適合するものは見つかりませんでした (「css のみ」のように) が、jQuery を使用していくつかの優れたソリューションを思いつきました。

  1. 入力の背景を透明に設定し、「プレースホルダー」テキストの z-index を -1 に設定しました。これにより、テキストの「上」をクリックして、実際に入力をクリックすることができます。この jsFiddleを参照してください。

  2. 「プレースホルダー」テキストを入力の上に置くことができますが、テキストでクリック ハンドラーを使用してフォーカスを入力に移します。この jsFiddleを参照してください。

どちらの場合も、実装の主力は次の jQuery コードです。

$('.text-input').each(function(){
    var input = $(this);
    //Initially hide the default value if the input is non-empty
    input.siblings('.default-value').toggle(!input.val());
    input.on("focus blur", function(){
        if(input.val().length === 0){
            input.siblings('.default-value').toggle();
        }
    }
)});​

パズルのもう 1 つの重要なピースは、入力が自由に移動できるようにしながら、「プレースホルダー」テキストを入力内に適切に配置する方法を理解することposition: absoluteでした。position: relative

于 2012-11-29T22:28:38.670 に答える