javascript - デフォルト値の代わりにプレースホルダーを HTML 形式で表示する

Question

HTML 形式のテキスト フィールドにはデフォルト値がありますが、デフォルト値の代わりにプレースホルダーを表示したいと考えています。何か案は？

Answer 1

ここであなたが言ったことから、実際にはfocusイベントとblur<input>イベントをリッスンし、何も入力されていない場合は何らかのキャッシュを使用してコンテンツをクリアして復元したいようです。

<input id="foo" type="text" value="" data-value="" />

次にスクリプトで

var foo = document.getElementById('foo');
foo.addEventListener('focus', function () {
    this.setAttribute('data-value', this.value);
    this.value = '';
});
foo.addEventListener('blur', function () {
    if (this.value === '')
        this.value = this.getAttribute('data-value');
});

デモ

Answer 2

HTML5 をサポートするブラウザーのみに関心がある場合は、次のオプションがあります。

<input type="text" name="myText" placeholder="My Placeholder">

Answer 3

一方で、それは実行可能です。一方、なぜそうすべきなのかわかりません。

$('input[type="text"]').each(function (i, o) {
    var inputBox = $(o),
        swapInValue = function () {
            inputBox.val(inputBox.data('val'));
        },
        swapOutValue = function () {
            inputBox.data('val', inputBox.val()).val('');
        };
    inputBox.blur(swapOutValue).focus(swapInValue);
});