大佬教程收集整理的这篇文章主要介绍了HTML5占位符在焦点上消失,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
焦点前
焦点好(Safari)
你可以用浏览器做什么with this simple fiddle。
“/或”是当前草案的新的,所以我想这就是为什么Chrome和Firefox不支持它。参见WebKit bug #73629,Chromium bug #103025。
>见the demo page
>抓住它GitHub
>使用the fiddle
我修改他的插件读取占位符属性,而不是手动创建跨度。
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','#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占位符在焦点上消失所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。