HTML5占位符消失焦点 [英] HTML5 placeholder disappears on focus

问题描述

是否有一个免费的jQuery插件，可以将占位符的行为更改为符合HTML5规范？ 焦点之前

关注焦点（Safari）

焦点不良（Chrome，Firefox）

您可以使用浏览器的功能写了一个不错的jQuery插件，只是这样做。

更多比罗伯特的稳定，当领域变得焦点时，也淡化成灰色。

• 请参阅演示页面


• 在 GitHub
使用小提琴

---

我修改了他的插件ad placeholder 属性，而不是手动创建 span 。

这个小提琴有完整的代码：

HTML

 < input type =textplaceholder =Hello，world！> 
  

JS

  
函数toggleLabel（）{
 var input = $（this） ; 
 $ b $ 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（' （def）{
 var dummy = $（'< label>< / label>）。text（def）.css（'visibility'，'藏（'body'）; 
 input.prev（'span'）。css（'margin-left'，dummy.width（）+ 3 +'px'）; 
 dummy.remove（）; 
} 
} else {
 input.prev（'span'）.css（'visibility'，'hidden'）; 
} 
}，0）; 
}; 
 
函数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）; //需要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'）; 
}） ; 
 $ b $（function（）{
 $（'input [placeholder]，textarea [placeholder]'）。 } 
）; 
}）; 
 
））（jQuery）; 
  

CSS

  .placeholder {
 background：white; 
 float：left; 
明确：两者; 
} 
 .placeholder span {
 position：absolute; 
 padding：5px; 
 margin-left：3px; 
颜色：＃999; 
} 
 .placeholder输入.placeholder textarea {
 position：relative; 
保证金：0; 
 border-width：1px; 
 padding：6px; 
背景：透明; 
字体：继承; 
} 
 
 / *黑客删除Safari的额外填充。删除，如果你不关心像素完美。 * / 
 @media screen和（-webkit-min-device-pixel-ratio：0）{
 .placeholder input，.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占位符消失焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！