2

次のログインフォームがあります。

div.field {
    position: relative;
}
label {
   font-size: 14px;
    position: absolute;
    top: 20px;
    left: 3px;
}​

<div class="username field">
    <label for="username">Enter email</label><br />
    <input type="text" class="field" name="email" id="id_email">
</div>
<div class="password field">
    <label for="password">Enter password</label><br />
    <input type="password" class="field" name="password" id="id_password">
</div>​

http://jsfiddle.net/5yBz5/

現在、ユーザーがラベル テキストのある場所をクリックしても何も起こりません (つまり、ユーザーはテキスト入力ではなくラベル テキストをクリックしているため)。ラベル テキストをテキスト入力に含めたいのですが、ユーザーがテキスト入力フィールドをクリックすると、ラベル テキストは無視されます。どうすればこれを達成できますか?

4

5 に答える 5

5

代わりに html5プレースホルダー属性を確認してください。これは、これを行うための推奨される方法です。

例： 

<input type="text" placeholder="placeholder text"></input>
于 2012-06-17T19:33:54.357 に答える
1

ラベルの z-index を -1 に設定し、入力フィールドを透明にします。このようにして、ラベルは入力フィールドの「背後」にレンダリングされるため、クリックすると、入力フィールドはラベルの代わりにイベントを受け取ります。

div.field {
    position: relative;
}
label {
    font-size: 14px;
    position: absolute;
    top: 20px;
    left: 3px;
    z-index:-1;
}
input {
    background: transparent;
}
于 2015-05-20T15:48:22.500 に答える
1

要素に追加onclick="this.innerHTML=''"します。labelこれは完全な解決策とは言えませんが、最適な使いやすさを備えた解決策は別のアプローチ (input 要素の前に label 要素を使用する) であり、問​​題は発生しません。

于 2012-06-17T19:45:20.040 に答える
1

方法 2:

jQuery (オプション) を使用して、ラベルのクリック イベントをキャプチャし、入力要素にフォーカスします。

​$("label").on("click",function(){
    $(this).parent().children("input").focus();
});​​​

http://jsfiddle.net/SsZTh/

于 2012-06-17T19:47:13.797 に答える
1

プレースホルダー テキストにラベルを使用することは、フォームに入力しようとしているユーザーにひどいユーザー エクスペリエンスを提供するため、良い考えではありません。

それはさておき、ここで注意すべき点がいくつかあります。

  • inputタグを閉じる
  • タグの for 属性は、関連する要素<label>の属性と同じにして、idそれらを結合する必要があります。

プレース ホルダー テキストを提供する場合は、javascript でテキスト置換を実行します。例えば：

<div>
    <label for="email">Enter email</label>
    <input type="text" class="defaultText" name="email" id="email" title="Enter email" />
</div>
<div>
    <label for="password">Enter password</label>
    <input type="text" name="password" id="password" />
</div>

jQuery の使用に注意してください。

$(function() {
    $(".defaultText").focus(function () {
        if ($(this).val() == $(this)[0].title) {
            $(this).removeClass("defaultTextActive");
            $(this).val("");
        }
    });

    $(".defaultText").blur(function () {
        if ($(this).val() == "") {
            $(this).addClass("defaultTextActive");
            $(this).val($(this)[0].title);
        }
    });

    $(".defaultText").blur(); 
})();

フィドルの例: http://jsfiddle.net/5yBz5/4/

于 2012-06-17T19:47:32.250 に答える