0

次のような形式のラベルを取得するにはどうすればよいですか。

<label for="email"> Email Address *</label>
<input id="email" type="text" name="email" value="" size="18">

入力テキストボックス内に表示し、入力要素がフォーカスされているかいっぱいになったときに消えますか?

私が見つけた解決策では、html コードを変更する必要がありますが、サードパーティのウィジェットからのものであるため、これを行うことはできません。入力フィールドの上にラベルを表示することはできますが、入力フィールドに何が起こったのかに反応させる方法がわかりません。

4

4 に答える 4

4

必要なのはプレースホルダーです。これは HTML5 属性ですが、IE および古いブラウザーではサポートされていません。記入するために、いくつかのライブラリがあります。jquery.enablePlaceholderを使用しましたが、正常に動作します。

JQuery を使用すると、現在のラベルを簡単に非表示/削除し、そのコンテンツを使用してプレースホルダー属性を埋めることができます (必要に応じてプラグインによって使用されます)。

$(document).ready(function() {
    // Fetch the label and its text
    var placeholderText = $("label[for='email']").text();

    // Remove the unnecessary label
    $("label[for='email']").remove();

    // Set the placeholder attribute
    // and enable the plugin for broswer not supporting it
    $("#email").attr('placeholder', placeholderText).enablePlaceholder(); 
});
于 2012-05-31T19:28:47.357 に答える
0

HTML構造を変更できないことを考えると、目的を達成するための1つの単純なJavaScriptの手段は次のとおりです。

function placeholding(el,greyed) {
    if (!el) {
        // if you don't specify a DOM node, it quits
        return false;
    }
    else {
        var input = el,
            /* assumes the label element is the previous element sibling
               (requires a fairly up-to-date/compliant browser */
            label = el.previousElementSibling,
            placeholder = label.textContent,
            /* specifies the color string, or uses the default, for the
               color of the place-holder */
            greyed = greyed || '#999';

        label.style.display = 'none';
        input.value = placeholder;
        input.style.color = greyed;
        input.onfocus = function() {
            /* if the current input-value is equal to the place-holder,
               removes that value. */
            if (this.value == placeholder) {
                this.setAttribute('data-oldvalue', this.value);
                this.value = '';
            }
            this.style.color = '#000';
        };
        input.onblur = function() {
            // if no new value has been set, replaces the place-holder
            if (this.value == '' || this.value.length === 0) {
                this.value = this.getAttribute('data-oldvalue');
                this.style.color = greyed;
            }
        };
    }
}

placeholding(document.getElementById('email'));​​​​​

前のlabel要素を非表示にし、そのテキストを要素の「プレースホルダー」として使用し、inputフォーカスにそのプレースホルダーを非表示にしinput、値が変更されていない場合は、プレースホルダーを再度表示します。

参照：

于 2012-05-31T19:56:12.533 に答える
0

jQuery を使用できる場合:

$("#yourForm input[type='text']").each(function(){
    $(this).attr("placeholder", $(this).prev("label").text());
}
于 2012-05-31T20:14:51.063 に答える
0

onFocus入力関数をオーバーライドする方法はありますか?

正の場合、次の 2 つの方法があります。

  • 試すreturn false;
  • その関数にLabeldisplay属性を設定inlineします。(非推奨)
于 2012-05-31T19:35:46.043 に答える