jQuery实现多浏览器兼容HTML5 placeholder

GD Star Rating
loading...

大家都知道HTML5里面的input或者textarea里的placeholder吧,可以很轻松的在点击后隐藏提示文字,但是IE老版本的因为不支持HTML5所以必定无法用,啊啊啊!!!可是这个需求真的是很普遍,工作中已经遇到过好多次这样的了,为了以后偷懒今天下班搞了个通用的代码吧~~

先说说思路吧:

  1. 用CSS将文本框(这里叫他 #ipt)和提示文字(这里叫他 #tips)这两个元素定位到一起,上下重叠,具体的实现方法我目前所知有a和b两种,a方法是将#ipt覆盖到#tips上,给#ipt设置透明度,b方法是将#tips覆盖到#ipt上。
  2. 在点击#tips或#ipt获得焦点时将#tips隐藏 / 修改#ipt透明度 / 将#tips移到到不影响#ipt输入的位置,对于方法a可以:将#tips隐藏 / 修改#ipt透明度,对于b可以将#tips隐藏 / 将#tips移到到不影响#ipt输入的位置。
  3. 在#ipt失去焦点时判断其值是否在trim后为空(可根据需要调整)来将#tips显示出。
  4. 在页面加载时同样需要判断#ipt是否在trim后为空(可根据需要调整),以防#ipt和#tips同时显示。

See the Pen virtual placeholder by Bane Lee (@zenoven) on CodePen.

至于用法就很简单了,直接virtualPlaceholder(selector)就好了~~

jQuery实现多浏览器兼容HTML5 placeholder, 3.3 out of 5 based on 4 ratings

仅有1条评论 发表评论

  1. 一里之父 /

    说实话对这些不懂,我是搞机械设计的,只对JAVA略有研究!
    希望可以在你这里学习一点东西,正所谓教不如偷师~哈哈!

    GD Star Rating
    loading...

发表评论