$(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. [HAOI2010]计数 数位DP+组合数

    题面: 你有一组非零数字(不一定唯一),你可以在其中插入任意个0,这样就可以产生无限个数.比如说给定{1,2},那么可以生成数字12,21,102,120,201,210,1002,1020,等等. ...

  2. BZOJ1179 [Apio2009]Atm 【tarjan缩点】

    1179: [Apio2009]Atm Time Limit: 15 Sec  Memory Limit: 162 MB Submit: 4048  Solved: 1762 [Submit][Sta ...

  3. SRM13 T3 花六游鸟小(结论题)

    哇这题是真的喵,HR智商太高辣 这题的难点就是看了题解之后怎么证明题解里的结论... 结论①:深度大于logm的点肯定能达到最大值 证明:显然一个西瓜的属性里0数量一半1数量一半我们取到的1数量最少, ...

  4. caffe环境的搭建(Ubuntu14.04 64bit,无CUDA,caffe在CPU下运行)

    1. 安装BLAS : $ sudo apt-get install libatlas-base-dev 2. 安装依赖项: $ sudo apt-get install libprotobuf-de ...

  5. unix awk手册读书笔记

    http://note.youdao.com/noteshare?id=9ac76eb63a53ac000f7814454642d2b0

  6. POJ 3254 状态压缩 DP

    B - Corn Fields Crawling in process... Crawling failed Time Limit:2000MS     Memory Limit:65536KB    ...

  7. Http字段含义

    转载自:http://blog.csdn.net/sand_ant/article/details/10503579 一.request请求Header简介 Accept:--客户机支持的类型 Acc ...

  8. Mybatis 使用技巧总结

    9月 11, 2014 | Nix.Huang 目录: 1.区分 #{} 和 ${}的不同应用场景 2.spring环境用mybatis-spring 的接口而不是Mybatis的原生接口 3.返回M ...

  9. 数学:Burnside引理与Pólya定理

    这个计数定理在考虑对称的计数中非常有用 先给出这个定理的描述,虽然看不太懂: 在一个置换群G={a1,a2,a3……ak}中,把每个置换都写成不相交循环的乘积. 设C1(ak)是在置换ak的作用下不动 ...

  10. [洛谷P1527] [国家集训队]矩阵乘法

    洛谷题目链接:[国家集训队]矩阵乘法 题目背景 原 <补丁VS错误>请前往P2761 题目描述 给你一个N*N的矩阵,不用算矩阵乘法,但是每次询问一个子矩形的第K小数. 输入输出格式 输入 ...