当前位置: 首页 >> 其它
 
 

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

来源:     时间:2018-06-10     浏览:  

什么是placeholder?

答:HTML5中的一个新属性,用于表单元素中,规定可描述输入字段预期值的简短的提示信息,也就是表单元素中的预留文本。适用于下面的 input 类型:text、search、url、tel、email 和 password,还适用于textarea元素。


 

placeholder有哪些兼容性问题?

答:1、placeholder在IE9及以前的浏览器中不能被支持

  2、在chrome和Firefox中,当input框获取焦点时,placeholder的文字依然在,只有在input中输入内容之后才会消失;而在IE和Safari中,当input框获取焦点时placeholder的文字就消失了

  3、默认情况下placeholder的文字是灰色的,当给input设置color时,在chrome和Safari中,placeholder的文字颜色不变;而在Firefox和IE中,placeholder文字的颜色会变成color的值

  4、当希望placeholder的文字和input的输入内容在input框中都居中的时候,简单的方法就是设置text-align:center,但是在某些浏览器中(目前我发现的就是三星手机自带的浏览器),设置之后placeholder的文字依然靠左


 

下面对这些问题进行说明:

  1、placeholder在IE9及以前的浏览器中不能被支持

  我自己还不会,等我会了再补上

  2、在chrome和Firefox中,当input框获取焦点时,placeholder的文字依然在,只有在input中输入内容之后才会消失;而在IE和Safari中,当input框获取焦点时placeholder的文字就消失了

  这个因为没有太大影响,所以暂不考虑,要是真的希望在所有浏览器中表现一模一样,那就用我下面的label替代法吧

  3、默认情况下placeholder的文字是灰色的,当给input设置color时,在chrome和Safari中,placeholder的文字颜色不变;而在Firefox和IE中,placeholder文字的颜色会变成color的值

  可单独为placeholder文本设置color,给input设置颜色之后就不会影响到placeholder了

 {:;} {:;} {:;}

  4、当希望placeholder的文字和input的输入内容在input框中都居中的时候,简单的方法就是设置text-align:center,但是在某些浏览器中(目前我发现的就是三星手机自带的浏览器),设置之后placeholder的文字依然靠左

  这里我写了一个用label代替placeholder的demo,可以解决以上所有问题,贴出代码

1 2     3     请输入号码4
复制代码
 1 function OnFocus () { 2         document.getElementById("labelPlaceholder").style.display="none";             //当input获取焦点时,label隐藏 3     } 4 function OnBlur () { 5         if (document.getElementById("inputBox").value=="") { 6             document.getElementById("labelPlaceholder").style.display="block";        //当input失去焦点时,如果input框中有内容则label隐藏,如果没有内容则label显示 7         } else{ 8             document.getElementById("labelPlaceholder").style.display="none"; 9         };10         11     }
复制代码
复制代码
 1 #inputPlaceholder{ 2         width: 100%; 3         height: auto; 4         position: relative; 5     } 6 #inputBox{ 7         width: 100%; 8         height: 30px; 9         line-height:30px;10         border:1px #DBEAF9 solid;11         border-radius:5px;12         background-color:#fff;13         text-align:center;14         font-size: 14px;15         padding: 0;16         margin: 0;17         color:#333;18     }19 #labelPlaceholder{20         width: 100%;21         height: 32px;22         line-height: 32px;23         color:#999;24         font-size: 14px;25         position: absolute;26         top: 0;27         left: 0;28         padding: 0;29         margin: 0;30         text-align:center;31     }32 ::-moz-placeholder{color:#999;}33 ::-webkit-input-placeholder{color:#999;}34 :-ms-input-placeholder{color:#999;}
复制代码

  效果图就是这样

 

  如果有错误or不足,欢迎指正


 
  • 联系我们

  • 邮箱:794421925@qq.com
  • 电话:13832367531
  • Q Q:794421925 点击交谈
  • 地址:石家庄市桥西区芳馨家园六号楼底商
  • 淘宝店铺金翼网络淘宝店铺

Copyright © 2008-2020 石家庄捷搜网络科技有限公司 版权所有 备案号:冀ICP备16025780号-1