5

「値」プロパティが空のテキスト入力フィールドがある場合、プレースホルダー属性 (「デフォルト値」や同様のアプローチではなく、プレースホルダー タグ) を追加する方法はありますか?

ここで似たような質問をたくさん見ましたが、ほとんどがデフォルト値を使用しています。プレースホルダー タグが必要で、さらに HTML 出力にまったく影響を与えることができません。

これは、指定された HTML 出力の例です。

<input type="text" value="" name="textbox" id="edit-textbox">
4

3 に答える 3

11

次のアプローチのいずれかをお勧めします。

$('input:text').each(
    function(i,el) {
        if (!el.value || el.value == '') {
            el.placeholder = 'placeholdertext';
            /* or:
            el.placeholder = $('label[for=' + el.id + ']').text();
            */
        }
    });

を使用した JS Fiddle デモel.placeholder = 'placeholdertext'

を使用した JS Fiddle デモel.placeholder = $('label[for=' + el.id + ']').text()

または、配列を使用してさまざまなプレースホルダーを格納できます。

var placeholders = ['Email address', 'favourite color'];

$('input:text').each(
    function(i,el) {
        if (!el.value || el.value == '') {
            el.placeholder = placeholders[i];
        }
    });​

JS フィドルのデモ

特定の要素に特定のプレースホルダーを指定するには:

var placeholders = {
    'one' : 'Email address',
    'two' : 'Favourite color'
};

$('input:text').each(
    function(i,el) {
        if (!el.value || el.value == '') {
            el.placeholder = placeholders[el.id];
        }
    });​

JS フィドルのデモ

特定の のプレースホルダー オブジェクトにエントリが存在しない場合のキャッチ/フォールバックを追加しましたinput

var placeholders = {
    'oe' : 'Email address', // <-- deliberate typo over there
    'two' : 'Favourite color'
};

$('input:text').each(
    function(i,el) {
        if (!el.value || el.value == '') {
            el.placeholder = placeholders[el.id] || '';
        }
    });​

JS フィドルのデモ

于 2012-10-20T22:10:38.917 に答える
4

HTML5 を使用している場合 (使用する必要があります)、ネイティブのプレースホルダー属性があります。

<input type="text" value="" placeholder="My placeholder!" name="textbox" id="edit-textbox">

編集

あなたが言ったように、HTML を編集できず、JS を使用する必要があるため、これが役立つ場合があります。

$('#edit-textbox').attr('placeholder', '私のプレースホルダー!');

繰り返しますが、これは HTML 5 用です。

于 2012-10-20T22:10:15.860 に答える
0
(function($) {

  $('#edit-textbox').attr('placeholder','Your placeholder text');

})(jQuery);
于 2014-11-15T12:03:20.873 に答える