web-dev-qa-db-ja.com

HTML5プレースホルダーがフォーカスで消える

HTML5仕様に一致するようにplaceholderの動作を変更する無料で利用可能なjQueryプラグインはありますか？

フォーカス前
chrome unfocused placeholder

On Focus Good（Safari）
safari focused placeholder

On Focus Bad（Chrome、Firefox）
chrome focused placeholder

あなたはあなたのブラウザがすることをすることができます この簡単なフィドルで 。

HTML5ドラフト仕様によると ：

ユーザーエージェントは、要素の値が空の文字列またはコントロールである場合、改行を取り除いた後、このヒントをユーザーに提示する必要があります。フォーカスされていない（フォーカスされていない空白のコントロール内に表示し、それ以外の場合は非表示にする）.

「/ or」は現在のドラフトでは新しいため、ChromeおよびFirefoxはまだそれをサポートしていません。 WebKitバグ＃73629 を参照してください Chromiumバグ＃103025 。

htmljquery-pluginssafarifocusplaceholder
26
Dan Abramov

Stefano labels

Stefano J. Attardi は、まさにそれを実行するNice jQueryプラグインを作成しました。
ロバートよりも安定しており、フィールドに焦点を合わせると、明るい灰色にフェードします。

placeholderを手動で作成するのではなく、span属性を読み取るようにプラグインを変更しました。
このフィドル には完全なコードがあります：

HTML

<input type="text" placeholder="Hello, world!">

JS

// Original code by Stefano J. Attardi, MIT license

(function($) {
    function toggleLabel() {
        var input = $(this);

        if (!input.parent().hasClass('placeholder')) {
            var label = $('<label>').addClass('placeholder');
            input.wrap(label);

            var span = $('<span>');
            span.text(input.attr('placeholder'))
            input.removeAttr('placeholder');
            span.insertBefore(input);
        }

        setTimeout(function() {
            var def = input.attr('title');
            if (!input.val() || (input.val() == def)) {
                input.prev('span').css('visibility', '');
                if (def) {
                    var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
                    input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
                    dummy.remove();
                }
            } else {
                input.prev('span').css('visibility', 'hidden');
            }
        }, 0);
    };

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(this).val(def);
            $(this).prev('span').css('visibility', '');
        }
    };

    var fields = $('input, textarea');

    fields.live('mouseup', toggleLabel); // needed for IE reset icon [X]
    fields.live('keydown', toggleLabel);
    fields.live('paste', toggleLabel);
    fields.live('focusin', function() {
        $(this).prev('span').css('color', '#ccc');
    });
    fields.live('focusout', function() {
        $(this).prev('span').css('color', '#999');
    });

    $(function() {
       $('input[placeholder], textarea[placeholder]').each(
           function() { toggleLabel.call(this); }
       );
    });

})(jQuery);

CSS

.placeholder {
  background: white;
  float: left;
  clear: both;
}
.placeholder span {
  position: absolute;
  padding: 5px;
  margin-left: 3px;
  color: #999;
}
.placeholder input, .placeholder textarea {
  position: relative;
  margin: 0;
  border-width: 1px;
  padding: 6px;
  background: transparent;
  font: inherit;
}

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .placeholder input, .placeholder textarea { padding: 4px; }
}
15
Dan Abramov

ロバート・ナイマンは問題を議論し、彼のアプローチを文書化します 彼のブログで 。
このフィドル 必要なHTML、CSS、JSをすべて備えています。

enter image description here

残念ながら、彼はvalueを変更することで問題を解決しています。
placeholderテキスト自体が有効な入力である場合、これは定義上機能しません。

4
Dan Abramov

私は同じ問題の解決策をグーグルで調べることによってこの質問を見つけました。既存のプラグインは、古いブラウザーでは機能しないか、フォーカスのプレースホルダーを非表示にしているようです。

それで、私は既存のプラグインから最高のパーツを組み合わせようとしている間、私自身の解決策を採用することに決めました。

あなたはそれをチェックアウト ここ して、問題に直面した場合は問題をオープンすることができます。

3
Andrey Kuzmin

このような単純なものはどうですか？フォーカスを当てて、プレースホルダーの属性値を保存し、属性を完全に削除します。ぼかしの場合は、属性を元に戻します。

$('input[type="text"]').focus( function(){
  $(this).attr("data-placeholder",$(this).attr('placeholder')).removeAttr("placeholder");
});
$('input[type="text"]').blur( function(){
  $(this).attr("placeholder",$(this).attr('data-placeholder'));
});
2
Logan

私は独自のcss3のみのソリューションを作成しました。それがすべてのニーズを満たしているかどうかを確認してください。

http://codepen.io/fabiandarga/pen/MayNWm

これは私の解決策です：

  1. 入力要素が「必須」に設定されている
  2. プレースホルダーの追加のspan要素が必要です。この要素は入力要素の上に移動されます（位置：絶対;）
  3. cSSセレクターでは、入力要素の有効性がテストされ（入力がない限り、必須フィールドは無効です）、プレースホルダーは非表示になります。

Pitfall：プレースホルダーが入力へのマウスイベントをブロックしています！この問題は、マウスが親（ラッパー）内にあるときにプレースホルダー要素を非表示にすることで回避されます。

<div class="wrapper">
  <input txpe="text" autofocus="autofocus" required/>
  <span class="placeholder">Hier text</span>
</div>

.placeholder {
  display: none;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0px;
  color: #A1A1A1;
}
input:invalid + .placeholder {
  display: block;  /* show the placeholder as long as the "required" field is empty */
}
.wrapper:hover .placeholder {
  display: none; /* required to guarantee the input is clickable */
}

.wrapper{
  position: relative;
  display: inline-block;
}
1
Fabian

多分あなたはフロートラベルパターンで試すことができます:)

CSSのフロートラベル を参照

0
herchila