HTML5占位符消失焦点
有没有一个免费的jQuery插件，改变placeholder行为，以符合HTML5规范？
焦点之前 
关注焦点（Safari） 
焦点不好（Chrome，Firefox） 
你可以用你的浏览器做这个简单的小提琴 。
HTML5草稿规范说 ：
用户代理应该向用户提供这个提示，当它已经剥离换行符，元素的值是空string和/或控件没有被聚焦时（例如，通过将其显示在未聚焦的空白控件中并且否则隐藏）。
“/或”在当前草案中是新的，所以我想这就是为什么Chrome和Firefox不支持它。 请参阅WebKit错误＃73629 ， 铬错误＃103025 。
Stefano J. Attardi写了一个很好的jQuery插件。
它比罗伯特更稳定，当领域集中时，也会变淡。
- 看演示页面
- 在GitHub上抓取它
- 玩小提琴
我修改他的插件来读取placeholder属性，而不是手动创build一个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; } }
罗伯特·尼曼（Robert Nyman）讨论这个问题，并在他的博客中logging他的方法
这个小提琴拥有所有必需的HTML，CSS和JS。
不幸的是，他通过改变value来解决问题。
如果placeholder文本本身是一个有效的input，这将不会工作。
我发现这个问题，通过search解决同一个问题。 看来，现有的插件要么不在老年人的浏览器中工作，要么隐藏占位符。
所以我决定推出我自己的解决scheme，同时尝试结合现有插件的最好的部分。
如果您遇到任何问题，您可以在这里查看并解决问题。
这样简单的事情呢？ 在焦点上保存占位符属性值并完全删除属性; 模糊，把属性放回：
$('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')); });
我写了我自己的css3唯一的解决scheme。 看看是否满足您的所有需求。
http://codepen.io/fabiandarga/pen/MayNWm
这是我的解决scheme：
- input元素被设置为“必需”
- 需要一个占位符的附加span元素。 这个元素被移动到input元素的顶部（position：absolute;）
- 用cssselect器对input元素进行有效性testing（只要没有input，必须的字段是无效的），然后隐藏占位符。
陷阱：占位符阻止mouseeventsinput！ 当鼠标位于父级（包装器）内时，通过隐藏占位符元素可以避免此问题。
<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; }
也许你可以尝试浮标签模式:)
请参阅CSS中的浮动标签
