---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

placeholder

javascript 蚂蚁 1605℃ 0评论

发现非常好用的placeholder IE低版本竟然不支持,只有使用js来做placeholder效果了。大家看看代码有坑没

<input type="text" placeholder="请输入关键字">
<script>
    $(function(){
        $('input').placeholder();
    })
</script>
input{
    display: block;
    width: 200px; height: 28px;
    *line-height: 28px;
    line-height: 28px\9;
    padding: 2px 5px;
    margin: 0 auto;
    outline: none;
    border: 1px solid #c2c2c2;
}
     $.fn.extend({
      placeholder : function () {
        if ("placeholder" in document.createElement("input")) {
          return this
        } else {
          return this.each(function () {
            var _this = $(this), color = _this.css('color');
            _this.val(_this.attr("placeholder")).css('color','#a9a9a9').focus(function () {
            if (_this.val() === _this.attr("placeholder")) {
               _this.val("").css('color', color);
            }
            }).blur(function () {
              if (_this.val().length === 0) {
                _this.val(_this.attr("placeholder"));
                _this.css('color','#a9a9a9');
              }
            })
          })
        }
      }
    });

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » placeholder

喜欢 (4)or分享 (0)
发表我的评论
取消评论

表情