placeholder兼容性问题

由于placeholder是H5新属性,IE9及以下都不支持

解决办法:给input添加一个背景图,背景图里面添加placeholder内容,当焦点落在输入框中,背景图隐藏,即可做出类似的效果

代码:

//引入jQuery框架$(function(){
    if(!(‘placeholder‘ in document.createElement(‘input‘))){
        jQuery(‘:input[placeholder]‘).each(function(index, element) {
               var self = $(this), txt = self.attr(‘placeholder‘);
               self.wrap($(‘<div></div>‘).css({position:‘relative‘,float:‘left‘, zoom:‘1‘, border:‘none‘, background:‘none‘, padding:‘none‘, margin:‘none‘}));
               var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css(‘padding-left‘);
               var holder = $(‘<span></span>‘).text(txt).css({‘position‘:‘absolute‘,
                                   ‘left‘:pos.left, ‘top‘:pos.top,
                                   ‘height‘:h, ‘line-Height‘:h+‘px‘,
                                   ‘paddingLeft‘:paddingleft, ‘color‘:‘#aaa‘}).appendTo(self.parent());
               self.focusin(function(e) {
                   holder.hide();
               }).focusout(function(e) {
                   if(!self.val()){
                       holder.show();
                   }else{
                	   holder.hide();
                   }
               });
               holder.click(function(e) {
                   holder.hide();
                   self.focus();
               });
           });
   }
});

  

时间: 2024-08-06 06:16:12

placeholder兼容性问题的相关文章

placeholder兼容性问题以及用label代替placeholder

什么是placeholder? 答:HTML5中的一个新属性,用于表单元素中,规定可描述输入字段预期值的简短的提示信息,也就是表单元素中的预留文本.适用于下面的 input 类型:text.search.url.tel.email 和 password,还适用于textarea元素. placeholder有哪些兼容性问题? 答:1.placeholder在IE9及以前的浏览器中不能被支持 2.在chrome和Firefox中,当input框获取焦点时,placeholder的文字依然在,只有在

placeholder兼容性问题解决方案

placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. <input id="t1" type="text" placeholder="请输入文字" /> 由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢?(更多HTML5/CSS3特性检测可以访问) function hasPlaceholderSupport() {      retur

html5 input placeholder兼容性处理

1.HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失.以前要实现这效果都是用JavaScript来控制才能实现: 2.由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢?(更多HTML5/CSS3特性检测可以访问) 1 fun

placeholder 属性的兼容性

placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失. 但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,例如ie9及以下的ie浏览器不兼容这个属性.下面介绍placeholder兼容性的处理 在页面添加如下脚本 $(function() {   // 如果不支持placeholder,用jQuery来完成   if(!isSupport

解决HTML5中placeholder属性兼容性的JQuery插件

//调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text" class="pHolder" placeholder="请输入姓名" /> //jquery插件 ($.fn.jason = function(a) {    var b = {        focus: "black",      

对于IE 10 以下版本placeholder的兼容性解决方案

<!-- 对于IE 10 以下版本placeholder的兼容性调整 --> <!--[if lt IE 10]> <script> $(function(){ $("input[type!='password'],textarea").bind({ "focus":function(){ var placeholderVal = $(this).attr("placeholder"); var realVal

解决&#39;placeholder&#39;针对IE的兼容性问题

if (navigator.userAgent.indexOf("MSIE")>0) {            $("input[placeholder]").each(function(){                $(this).val((($(this).val()=="")?$(this).attr("placeholder"):"")).blur(function(){        

input placeholder属性IE、360浏览器兼容性问题

效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建JS文件:jquery.JPlaceholder.js js代码如下: /* * jQuery placeholder, fix for IE6,7,8,9 * hovertree.com */ var JPlaceHolder = { //检测 _check : function(){ retur

placeholder右对齐的写法,兼容性比较高的一种方法

placeholder右对齐的写法,如果你不考虑移动端的话,完全可以使用text-align:right,不过如果考虑移动端的话,在有一些手机上,即使你写了text-align:right,placeholder也是左对齐的,经过百度后得出,http://stackoverflow.com/questions/6729837/text-align-right-only-for-placeholder,经过我的验证,这个方法完美无缺,特记录在册,以备后用!!! ::-webkit-input-pl