placeholder 在ie6-8失效解决办法

最新推荐文章于 2020-04-07 17:48:31 发布

原创最新推荐文章于 2020-04-07 17:48:31 发布 · 577 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie 6 #jquery

java 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了如何在浏览器不支持placeholder属性时，通过JavaScript实现输入框的模糊提示功能，确保用户体验不受影响。

$(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));

      }

    });

  }

});