$(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. 控制Docker Compose的启动顺序的一个思路

    起源 守护进程daemon 从守护进程的角度看Docker Compose Docker的解决方案 思路 代码 结果 起源 Docker Compose提供了一个depends_on参数. https ...

  2. CF97B:Superset——题解

    http://codeforces.com/problemset/problem/97/B 题目大意:给n个点,添加一些点,使得任意两个点: 1.在同一条线上 2.以它们为顶点构成的矩形上有其他点. ...

  3. 洛谷 P1505 [国家集训队]旅游 解题报告

    P1505 [国家集训队]旅游 题目描述 \(\tt{Ray}\) 乐忠于旅游,这次他来到了\(T\)城.\(T\)城是一个水上城市,一共有 \(N\) 个景点,有些景点之间会用一座桥连接.为了方便游 ...

  4. bzoj4773: 负环(倍增floyd)

    浴谷夏令营例题...讲师讲的很清楚,没看题解代码就自己敲出来了 f[l][i][j]表示i到j走2^l条边的最短距离,显然有f[l][i][j]=min(f[l][i][j],f[l-1][i][k] ...

  5. YAML schema reference

    YAML schema reference 10/30/2018 14 minutes to read Azure Pipelines Here's a detailed reference guid ...

  6. php中error_reporting

    error_reporting(255);是列出所有提示error_reporting(0);是不显示所有提示建议使用error_reporting(7);只显示严重错误1 E_ERROR 致命的运行 ...

  7. (转)Django发送html邮件

    本文转自http://blog.csdn.net/yima1006/article/details/8991145 send_mail(subject, message, from_email, re ...

  8. Spring 源码学习(1) —— 自定义标签

    Spring 工作流程是先加载解析xml配置文件:配置文件中存在默认的标签,也可以自定义标签.解析默认标签调用: private void parseDefaultElement(Element el ...

  9. html 5 新特性

    现在html 5技术是最新的html标准,掌握html 5已经变得非常重要,以下是我查看相关资料后对html 5 的新特性的总结,方便大家对比学习.html 5的新特性1.取消了一些过时的html 4 ...

  10. 用pip命令安装Python第三方库

    一.准备工作 1. 安装pip (1)下载 pip下载地址:https://pypi.python.org/pypi/pip#downloads (2)安装 下载后解压,控制台下进入解压后的目录,运行 ...