placeholder兼容方法(兼容IE8以上浏览器)

placeholder是HTML5的质量之意气风发,在不相同的浏览器中会有略微分化的来得效果:

三种艺术基于jQuery完成IE浏览器包容placeholder效果

 placeholder是HTML5<input>的属性之生机勃勃,在分裂的浏览器(
协助HTML5的今世浏览器 卡塔尔(قطر‎中会有略微区别的显得效果:

在Chrome( v31.0.1650.63 m卡塔尔、Firefox( v21.0 卡塔尔(قطر‎、360安全( v6.3 极速模式卡塔尔国中,输入栏取得核心后,提醒文字并不消退,如图( Chrome 卡塔尔(英语:State of Qatar):

收获核心前:

奥门威尼斯网址 1

获得核心时:

奥门威尼斯网址 2

偏偏IE11要搞点极度:

收获主题前:

奥门威尼斯网址 3

拿到大旨时:

奥门威尼斯网址 4

也正是说获得大旨时提示的文字会消失。

非今世浏览器( 比方 IE6-IE9
卡塔尔是不扶持placeholder属性的。以往用jQuery来使那几个非今世浏览器也如出风流罗曼蒂克辙能能兑现placeholder的显得效果,第后生可畏种艺术达成的是IE11这种效率,也正是输入框获得宗旨时提示文字会消失;假若要想博得临近Chrome的效果,即输入框获得主旨时提示文字并不收敛,能够接收第二种形式。

方法一

奥门威尼斯网址,效果与利益预览:

思路是,首先判别浏览器是不是补助placeholder属性,借使不帮忙的话,就遍历全数input输入框,获取placeholder属性的值填充进输入框作为提醒消息,同有时间字体设置成荧光色。

当输入框得到大旨( focus
卡塔尔国同一时候输入框内文字等于设置的提醒新闻时,就把输入框内清空;

当输入框失去核心( blur
卡塔尔同临时间输入框内文字为空时,再把收获的placeholder属性的值填充进输入框作为提醒音信,同有时候字体设置成黄绿;

当输入框内有输入( keydown
卡塔尔时,这时候输入框内的提醒音信已经由focus事件消除,那时只供给把字体再过来成浅石绿就能够。

此形式的败笔是,不适用于加载完DOM时即得到宗旨的输入框,因为在客商的角度,加载完页面时见到的获取主题的可怜输入框,它的唤醒文字是看不到的。

HTML:

<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>

CSS:

.phcolor{ color:#999;}

JS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

$(function(){  

  

  //判断浏览器是否支持placeholder属性

  supportPlaceholder=’placeholder’in document.createElement(‘input’),

  

  placeholder=function(input){

  

    var text = input.attr(‘placeholder’),

    defaultValue = input.defaultValue;

  

    if(!defaultValue){

  

      input.val(text).addClass("phcolor");

    }

  

    input.focus(function(){

  

      if(input.val() == text){

    

        $(this).val("");

      }

    });

  

   

    input.blur(function(){

  

      if(input.val() == ""){

        

        $(this).val(text).addClass("phcolor");

      }

    });

  

    //输入的字符不为灰色

    input.keydown(function(){

   

      $(this).removeClass("phcolor");

    });

  };

  

  //当浏览器不支持placeholder属性时,调用placeholder函数

  if(!supportPlaceholder){

  

    $(‘input’).each(function(){

  

      text = $(this).attr("placeholder");

  

      if($(this).attr("type") == "text"){

  

        placeholder($(this));

      }

    });

  }

  

});

经过测量检验能够直达IE11placeholder的来得效果。

方法二

此办法的笔触是做一张带有提醒文字的图片作为input输入框的背景图,开头时收获主旨同有时候加载背景图;

背景图如下:

奥门威尼斯网址 5

当输入框不为空时,去掉背景图;

当输入框为空时,加载背景图;

当顾客键盘开关且输入框不为空( 输入字符 卡塔尔(英语:State of Qatar)时,去掉背景图;

当客商键盘开关且输入框为空( 删除字符 卡塔尔国时,加载背景图。

此办法的缺欠是:须要为每三个提拔文字差别的input制作背景图片,而且安装input的体裁。

HTML代码不改变。

CSS:

.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

$(function(){  

  

   //判断浏览器是否支持placeholder属性

   supportPlaceholder=’placeholder’ in document.createElement(‘input’);

  

   if(!supportPlaceholder){

  

     //初始状态添加背景图片

     $("#uname").attr("class","phbg");

     //初始状态获得焦点

     $("#uname").focus;

  

     function destyle(){

       

      if($("#uname").val() != ""){

          

        $("#uname").removeClass("phbg");

      }else{

        

        $("#uname").attr("class","phbg");

       }

     }

       

     //当输入框为空时,添加背景图片;有值时去掉背景图片

     destyle();

  

     $("#uname").keyup(function(){

  

      //当输入框有按键输入同时输入框不为空时,去掉背景图片;有按键输入同时为空时(删除字符),添加背景图片

      destyle();

     });

  

     $("#uname").keydown(function(){

       

      //keydown事件可以在按键按下的第一时间去掉背景图片

      $("#uname").removeClass("phbg");

     });

   }

});

此方式至此甘休。

此措施在IETester的IE8下显得效果:

获得宗旨时:

奥门威尼斯网址 6

错失主旨时:

奥门威尼斯网址 7

有输入时:

奥门威尼斯网址 8

假诺有爱人有更加好的点子,招待交换切磋。

placeholder是HTML5input的质量之一,在不一致的浏览器( 扶持HTML5的今世浏览器
卡塔尔(英语:State of Qatar)中会有稍微分裂…

//placeholder兼容方法(兼容IE8以上浏览器)
            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');
                        //此处的css样式,根据情况修改
                        var holder = $('').text(txt).css({
                            position: 'absolute',
                            left: pos.left,
                            // top: pos.top,
                            height: h + 'px',
                            lineHeight: h + 'px',
                            paddingLeft: paddingleft,
                            color: '#aaa',
                            paddingTop: '15px',
                            textAlign: 'center',
                            width: '347px'
                        }).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();
                        });
                    });
                }
            };
            //执行placeholder兼容方法
            jQuery(function () {
                JPlaceHolder.init();
            });

在Chrome、Firefox、360安然无事中,输入栏拿到核心后,提示文字并不收敛,如图:

相关随笔

连带找出:

明日看什么

搜寻才能库

再次来到首页

  • EF增删查改加实施存款和储蓄进程和sql语句,二种方
  • WebGIS中国化工进出口总集团解选用Lucene进行兴趣点寻找排序的两
  • Android应用源码基于vitamio的网络TV直播源码
  • 在Xcode4中编辑代码,Xcode4编写代码
  • c#写入Mysql汉语呈现乱码
    消除措施,
  • 依据jQuery和CSS3璀璨图片3D旋转幻灯片特效,

连锁频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前边贰个代码  正则表明式  Flex教程  WEB前端教程  

 

偏偏IE11要搞点极其:

帮客研究

约等于说拿到大旨时提示的文字会消失。

非今世浏览器是不扶助placeholder属性的。今后用jQuery来使这一个非今世浏览器也生机勃勃致能能兑现placeholder的来得效果,第大器晚成种艺术达成的是IE11这种效果与利益,也正是输入框获得主旨时提示文字会消失;假使要想博得临近Chrome的效果,即输入框获得核心时提示文字并不收敛,能够采纳第二种情势。

方法一

思路是,首先判定浏览器是或不是协理placeholder属性,假如不协助的话,就遍历全数input输入框,获取placeholder属性的值填充进输入框作为提醒信息,同不经常间字体设置成葡萄紫。

当输入框获得宗旨同时输入框内文字等于设置的提示消息时,就把输入框内清空;

当输入框失去大旨同期输入框内文字为空时,再把收获的placeholder属性的值填充进输入框作为提示消息,同期字体设置成深紫红;

当输入框内有输入时,那时候输入框内的提醒消息已经由focus事件解除,当时只须求把字体再过来成洋红就可以。

此情势的弱项是,不适用于加载完DOM时即拿到主旨的输入框,因为在客户的角度,加载完页面时见到的拿到核心的可怜输入框,它的唤起文字是看不到的。

.phcolor{ color:#999;}

${ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement, placeholder=function{ var text = input.attr, defaultValue = input.defaultValue; if{ input.val.addClass; } input.focus{ if{ $; input.blur{ if{ $.addClass; //输入的字符不为灰色 input.keydown.removeClass; }; //当浏览器不支持placeholder属性时,调用placeholder函数 if{ $.each{ text = $.attr; if == "text"){ placeholder;

透过测量检验能够直达IE11placeholder的展现效果。

方法二

此措施的笔触是做一张带有提醒文字的图纸作为input输入框的背景图,开端时得到核心同期加载背景图;

当输入框不为空时,去掉背景图;

当输入框为空时,加载背景图;

当顾客键盘按钮且输入框不为空时,去掉背景图;

当客商键盘按钮且输入框为空时,加载背景图。

此形式的根基差是:须要为每多少个唤起文字分歧的input制作背景图片,并且安装input的体裁。

.phbg{ background:url 0 0 no-repeat;}

${ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder' in document.createElement; if{ //初始状态添加背景图片 $.attr; //初始状态获得焦点 $.focus; function destyle.val.removeClass; }else{ $.attr; } } //当输入框为空时,添加背景图片;有值时去掉背景图片 destyle.keyup{ //当输入框有按键输入同时输入框不为空时,去掉背景图片;有按键输入同时为空时,添加背景图片 destyle.keydown{ //keydown事件可以在按键按下的第一时间去掉背景图片 $.removeClass;

此方法在IETester的IE8下显得效果:

若果有意中人有更加好的格局,招待沟通探讨。

发表评论

电子邮件地址不会被公开。 必填项已用*标注