問題描述

是否有免費的 jQuery 插件可以改變 placeholder 的行為以匹配 HTML5 規范?

聚焦前

專注于良好(Safari)

專注不好(Chrome、Firefox)

您可以通過這個簡單的小提琴 寫了一個很好的 jQuery 插件，就是這樣做的.
它比 Robert 的更穩定，并且在聚焦區域時會逐漸變為淺灰色.

• 查看演示頁面
• 在 GitHub
上獲取它
• 玩小提琴

我修改了他的插件以讀取 placeholder 屬性，而不是手動創建 span.
這個小提琴有完整的代碼:

HTML

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

JS

//Stefano J. Attardi 的原始代碼，MIT 許可證(函數($){功能切換標簽(){var 輸入 = $(this);if (!input.parent().hasClass('placeholder')) {var label = $('<label>').addClass('placeholder');input.wrap(標簽);var span = $('<span>');span.text(input.attr('占位符'))input.removeAttr('占位符');span.insertBefore(輸入);}設置超時(函數(){var def = input.attr('title');if (!input.val() || (input.val() == def)) {input.prev('span').css('visibility', '');如果(定義){var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');input.prev('span').css('margin-left', dummy.width() + 3 + 'px');dummy.remove();}} 別的 {input.prev('span').css('visibility', 'hidden');}}, 0);};函數重置字段(){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);//IE 重置圖標需要 [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');});$(函數(){$('input[placeholder], textarea[placeholder]').each(函數() { toggleLabel.call(這個)；});});})(jQuery);

CSS

.placeholder {背景:白色；向左飄浮;明確:兩者；}.占位符跨度{位置:絕對；填充:5px；左邊距:3px；顏色:#999；}.placeholder 輸入，.placeholder textarea {位置:相對；邊距:0；邊框寬度:1px；填充:6px；背景:透明；字體:繼承；}/* 刪除 Safari 的額外填充.如果您不關心像素完美，請刪除.*/@media 屏幕和 (-webkit-min-device-pixel-ratio:0) {.placeholder 輸入，.placeholder textarea { padding: 4px;}}

Is there a freely available jQuery plugin that changes placeholder behavior to match HTML5 spec?

Before Focus

On Focus Good (Safari)

On Focus Bad (Chrome, Firefox)

You can what your browser does with this simple fiddle.

HTML5 draft spec says:

User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise).

The "/or" is new in current draft so I suppose that's why Chrome and Firefox don't support it yet. See WebKit bug #73629, Chromium bug #103025.

Stefano J. Attardi wrote a nice jQuery plugin that just does that.
It is more stable than Robert's and also fades to a lighter grey when the field gets focused.

• See the demo page
• Grab it on GitHub
• Play with the fiddle

I modified his plugin to read placeholder attribute as opposed to manually creating a span.
This fiddle has complete code:

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; }
}

這篇關于HTML5 占位符在焦點上消失的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！