$(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. BZOJ5338:[TJOI2018]异或——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=5338 现在有一颗以1为根节点的由n个节点组成的树,树上每个节点上都有一个权值vi. 现在有Q 次操 ...

  2. de4dot 用法

    使用de4dot反混淆一下 用法 de4dot -f input.dll -o output.dll

  3. ContestHunter暑假欢乐赛 SRM 05

    T1 组合数,求一下乘法逆元就行了 没取模 没1LL* 爆零了 T2 让最大子段和最小就行,跑最大子段和的时候若超过S就弹出堆中最大的数,每次有负数加进来不断弹出最小的数相加重新加进堆直到为正数,因为 ...

  4. [bzoj 1594]猜数游戏

    主要是怎么处理矛盾 矛盾的条件有$2$种: 第一种是当把所有相等的$a$都全部找到后,他们并没有全联通,所以矛盾,因为没有两个是相同的 第二种是在2组$(l,r,a)$,$(l1,r1,a1)$中,$ ...

  5. SDWebImage的使用说明

    1. 在需要的地方导入头文件 #import "UIImageView+WebCache.h" webCache:网络缓存,几乎目前所有的浏览器都有一个内置的缓存,它们通常利用客户 ...

  6. ADS 安装失败后在此安装在Modify Repair Remove界面循环问题解决

    估计是因为Win7和ADS不兼容的原因,第一次安装ADS后一直停在100%的位置,等了好久也没有反应.于是我点了Cancel.准备从新安装,于是就发生了下面的问题:一直在Modify Repair R ...

  7. NYOJ 745 dp

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种 ...

  8. HDU1114 背包

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  9. 名人问题/名流问题/Celebrity

    问题描述:名人问题一个名人就是指这样一个人:所有其他人都认识他,并且他不认识任何其他人.现在有一个N个人的集合,以及他们之间的认识关系.求一个算法找出其中的名人(如果有的话)或者判断出没有名人(如果没 ...

  10. 2017-2018-2 20179207 《网络攻防技术》python简明教程(1-10)

    Python3简明教程(一) 开始python之旅 使用交互模式的 Python3解释器 简单使用 vim 编写 Python3 脚本 执行 Python3 脚本 Python3 代码风格建议 Pyt ...