首页 > Web开发 > 详细

HTML5中的placeholder属性

时间:2016-04-21 18:18:28      阅读:297      评论:0      收藏:0      [点我收藏+]

 

placeholder属性是HTML5 中为input添加的。在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示。


<input type="text" name="loginName" placeholder="邮箱/手机号/QQ号">

目前浏览器的支持情况

浏览器 IE6/7/8/9 IE10+ Firefox Chrome Safari 
是否支持 NO YES YES YES YES

 

然而,虽然IE10+支持placeholder属性,它的表现与其它浏览器也不一致

  • IE10+里鼠标点击时(获取焦点)placeholder文本消失
  • Firefox/Chrome/Safari点击不消失,而是键盘输入时文本消失

 

这相当恶心,如果使用了placeholder属性。产品经理还是不依不饶,会讲为什么IE里是点击的时候提示文本消失,Chrome里却是键盘输入的时候提示文本消失。要求前端工程师改成一样的表现形式。鉴于此,以下两种实现方式均不采用原生的placeholder属性。

 

两种方式的思路

  1. (方式一)使用input的value作为显示文本
  2. (方式二)不使用value,添加一个额外的标签(span)到body里然后绝对定位覆盖到input上面

两种方式各有优缺点,方式一占用了input的value属性,表单提交时需要额外做一些判断工作,方式二则使用了额外的标签。

http://www.cnblogs.com/snandy/p/4115883.html

HTML5中的placeholder属性

原文:http://www.cnblogs.com/Ly426/p/5417828.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!