input兼容placeholder

转载 2016年08月30日 16:36:47
var JPlaceHolder = {
    //检测
    _check : function(){
        return 'placeholder' in document.createElement('input');
    },
    //初始化
    init : function(){
        if(!this._check()){
            this.fix();
        }
    },
    //修复
    fix : function(){
        jQuery(':input[placeholder]').each(function(index, element) {
            var self = $(this), txt = self.attr('placeholder');
            self.wrap($('<div></div>').css({position:'relative', 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, lienHeight:h+"px", paddingLeft:paddingleft, color:'#aaa'}).appendTo(self.parent());
            self.focusin(function(e) {
                holder.hide();
            }).focusout(function(e) {
                if(!self.val()){
                    holder.show();
                }
            });
            holder.click(function(e) {
                holder.hide();
                self.focus();
            });
        });
    }
};
//执行
jQuery(function(){
    JPlaceHolder.init();    

});


html部分只要写个文本框就可以了,里面加上placeholder,当为ie的情况下,会变为span定位在上面,如果你的input框想高一些,发现placeholder无法垂直居中,可以设css样式span的padding-top来修改,前提,里面尽量不要有别的span标签,因为会影响别的span标签

HTML 5 <input> placeholder 属性兼容性解决办法

跨浏览器placehoder body{ font:12px/1.5 'simsun';} form{ width:300px; height:260px; ...
  • huangyibin628
  • huangyibin628
  • 2014年07月17日 11:01
  • 3379

jquery input placeholder支持兼容ie7,ie8

/* * jQuery placeholder, fix for IE6,7,8,9 * @author byh */ var JPlaceHolder = { //检测 _ch...
  • boyit0
  • boyit0
  • 2016年12月14日 09:47
  • 881

placeholder兼容浏览器的解决方案

关于placeholder的使用,众所周知它是h5的新属性,所以IE9以下就别想用它了,不支持。 那么我们必须要低版本的浏览器,做一些降级处理的兼容,原理自然就是:提示语placeholder用其他方...
  • xw505501936
  • xw505501936
  • 2016年10月14日 14:57
  • 5985

IE10 以下版本完美支持 placeholder 特性

IE10 以下版本完美支持 placeholder 特性
  • luofeng0710
  • luofeng0710
  • 2015年01月23日 09:51
  • 3863

ie8浏览器不支持placeholder属性

$(function(){      //判断浏览器是否支持placeholder属性  supportPlaceholder='placeholder'in document.createEl...
  • u010251897
  • u010251897
  • 2015年06月25日 22:34
  • 1117

input属性placeholder的兼容性问题

点击打开链接 HTML5 Placeholder实现input背景文字提示效果 2 这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在...
  • QTFYING
  • QTFYING
  • 2015年07月04日 15:01
  • 1645

placeholder 问题考虑密码输入框 ie兼容问题办法

placeholder在ie9中不兼容问题解决办法 1、html页面主要内容 2、引入jquery文件 3、主要的js内容 (function($) { ...
  • I_am_listen
  • I_am_listen
  • 2017年07月26日 10:55
  • 988

jq操作代替placeholder属性(兼容ie8)

html代码 请输入您的手机号 js代码   $(".input-list").on('focus', 'input', ...
  • yoyoosyy
  • yoyoosyy
  • 2017年03月23日 12:19
  • 182

使input date支持placeholder方法

input type date 的 placeholder 支持性有一定问题,因为浏览器会针对此类型 input 增加 datepicker 模块,看上去没那么必要支持 placeholder。 对 ...
  • qq_16494241
  • qq_16494241
  • 2016年06月02日 10:44
  • 1221

css3新属性placeholder兼容ie7/ie8

IE7和IE8发布时间较早,而且微软老版本浏览器支持一向不好,css3的新属性placeholder在IE7和IE8上完全不支持(本人已完全放弃IE6),为了让IE7和IE8也能够用上如此好用的css...
  • u010480479
  • u010480479
  • 2015年09月18日 13:52
  • 2441
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:input兼容placeholder
举报原因:
原因补充:

(最多只允许输入30个字)