HTML5占位符在焦点上消失

Question

是否有免费提供的jQuery插件可以更改placeholder行为以匹配HTML5规范？

聚焦前

关注焦点（Safari）

关注焦点（Chrome，Firefox）

您可以使用浏览器执行的操作with this simple fiddle。

HTML5 draft spec says：

  

当元素的值为空字符串和/或时，用户代理应该向用户提供此提示，此时元素的值为空字符串和/或控件未被聚焦（例如，通过在内部显示它一个空白的未聚焦控件，否则将其隐藏起来。）

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

Answer 1

Stefano J. Attardi写了一个很棒的jQuery插件，就是这样做的 它比罗伯特更稳定，并且当场地聚焦时也会变淡。“

• 请参阅the demo page
• 抓住GitHub
• 使用the fiddle
进行游戏

---

我修改了他的插件以阅读placeholder属性，而不是手动创建span This fiddle有完整的代码：

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

Answer 2

Robert Nyman讨论了这个问题，并记录了他的方法in his blog This fiddle具有所有必要的HTML，CSS和JS。

不幸的是，他通过改变value解决了这个问题 如果placeholder文本本身就是一个有效的输入，这将无法按定义工作。

Answer 3

我通过搜索出同样问题的解决方案找到了这个问题。似乎现有的插件在老年浏览器中不起作用或者在焦点上隐藏占位符。

所以我决定在尝试组合现有插件的最佳部分时推出自己的解决方案。

如果您遇到任何问题，可以查看here并打开问题。

Answer 4

这样简单的事情怎么样？在焦点上保存占位符属性值并完全删除属性;在模糊，把属性放回去：

$('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'));
});   

Answer 5

我编写了自己的css3唯一解决方案。看看是否能满足您的所有需求。

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

这是我的解决方案：

1. 输入元素设置为＆＃34; required＆＃34;
2. 需要占位符的aditional span元素。此元素移动到input元素的顶部（position：absolute;）
3. 使用css选择器测试输入元素的有效性（只要没有输入，必填字段无效），然后隐藏占位符。

陷阱：占位符阻止鼠标事件输入！当鼠标位于父（包装器）内时，通过隐藏占位符元素来避免此问题。

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

Answer 6

也许您可以尝试使用Float Label Pattern：）

请参阅Float labels in CSS