HTML5占位符在焦点上消失

有没有免费提供的jQuery插件，改变占位符行为以匹配HTML5规范？

焦点前

焦点好(Safari)

焦点错误(Chrome，Firefox)

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).

“/或”是当前草案的新的，所以我想这就是为什么Chrome和Firefox不支持它。参见WebKit bug #73629,Chromium bug #103025。

解决方法

Stefano J. Attardi写了一个不错的jQuery插件，只是这样。
它比罗伯特的更稳定，并且当场得到焦点时，还会变淡到更浅的灰色。

>见the demo page
>抓住它GitHub
>使用the fiddle

我修改他的插件读取占位符属性，而不是手动创建跨度。
This fiddle具有完整代码：

HTML

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

// 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','#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相关文章