css - CSS のプレースホルダーにテキストを追加する

Question

<input type='text' />

次のように、CSS にプレースホルダー テキストを追加する必要があります。

input:placeholder{content: 'placeholder text';}

Answer 1

cssでこれを行うことはできません。ただし、以下のデモに示すように、jQuery を使用してこれを実現できます。

$(document).ready(function() {
    placeholders();
    function placeholders() {
        var count = 0;
        $('input[type=text]').each(function() {
            count++;
			$(this).attr('placeholder', 'value ' + count);
        });
    }
    
    $(document).on('click', '.delete', function() {
    	$(this).closest('div').remove();
        placeholders();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <input type="text"/><button class="delete">DELETE</button>
</div>
<div>
    <input type="text"/><button class="delete">DELETE</button>
</div>
<div>
    <input type="text"/><button class="delete">DELETE</button>
</div>
<div>
    <input type="text"/><button class="delete">DELETE</button>
</div>