$(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" || $(this).attr("type") == "password"){
 
        placeholder($(this));
      }
    });
  }
 
});

类似于input输入框placeholder的效果,兼容ie8的更多相关文章

  1. 移动端页面-点击input输入框禁止放大效果

    点击input输入框会获取焦点并且放大 解决方法:在项目根目录找到 index.html <meta name="viewport" content="width= ...

  2. input输入框的border-radius属性在IE8下的完美兼容

    在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛.不错方法确实是这样,但是不要忘了border-radi ...

  3. input输入框文字提示IE兼容

    <script src="assets/js/jquery-1.9.1.min.js"></script> <script> /* * jQue ...

  4. css hover图片hover效果兼容ie8

    例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. css改变input输入框placeholder值颜色

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Fi ...

  6. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

  7. 兼容IE8的input输入框的正确使用姿势

    input是一个很常见的标签,大家使用的也很常见,但是我在具体的工作中发现要想完美的使用这个标签还是任重而道远,下面是我碰到的几个问题. 1.我们在使用这个标签的时候会习惯的加上placeholder ...

  8. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  9. HTML5 Placeholder实现input背景文字提示效果

    这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

随机推荐

  1. [洛谷P4735]最大异或和

    题目大意:有一串初始长度为$n$的序列$a$,有两种操作: $A\;x:$在序列末尾加一个数$x$ $Q\;l\;r\;x:$找一个位置$p$,满足$l\leqslant p\leqslant r$, ...

  2. 2018牛客多校第六场 G.Pikachu

    题意: 给出一棵n个点的树,每条边有边权.对这个树加边变成一个完全图.新加的边的权值为边上两点在树上的距离.求完全图上任意两点的最大流之和. 题解: 一共有C(n,2)个点对.假设当前求s到t之间的最 ...

  3. HDU1007:Quoit Design——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=1007 题目大意:给n个点,求点对最短距离/2. —————————————————————— 平面分治裸题. 暂 ...

  4. MyBatis之二级缓存

    二级缓存与一级缓存区别:二级缓存的范围更大,多个sqlSession可以共享一个UserMapper的二级缓存区域. 每一个mapper都有一个自己的二缓存区域(按namespace区分),两个map ...

  5. Rectangle 暴力枚举大法

    frog has a piece of paper divided into n rows and m columns. Today, she would like to draw a rectang ...

  6. Leetcode 295. 数据流的中位数

    1.题目要求 中位数是有序列表中间的数.如果列表长度是偶数,中位数则是中间两个数的平均值. 例如, [2,3,4] 的中位数是 3 [2,3] 的中位数是 (2 + 3) / 2 = 2.5 设计一个 ...

  7. 轮廓问题/Outline Problem

    --------------------------------------------------- //已发布改进后的轮廓问题算法:http://www.cnblogs.com/andyzeng/ ...

  8. 问题03.如果有多个集合的迭代处理情况【使用MAP】

    在SQL开发过程中,动态构建In集合条件查询是比较常见的用法,在Mybatis中提供了foreach功能,该功能比较强大,它允许你指定一个集合,声明集合项和索引变量,它们可以用在元素体内.它也允许你指 ...

  9. mysql Innodb索引

    基本概念 对于mysql目前的默认存储引擎Innodb来说,索引分为2个,一个是聚集索引,一个是普通索引(也叫二级索引). 聚集索引:聚集索引的顺序和数据在磁盘的顺序一致,因此查询时使用聚集索引,效率 ...

  10. lombok 配置使用以及优势

    maven依赖 <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> ...