$(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. BZOJ4597:[SHOI2016]随机序列——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4597 你的面前有N个数排成一行.分别为A1, A2, … , An.你打算在每相邻的两个 Ai和 ...

  2. BZOJ1297:[SCOI2009]迷路——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1297 windy在有向图中迷路了. 该有向图有 N 个节点,windy从节点 0 出发,他必须恰好在 ...

  3. [bzoj] 2657 ZJOI2012 旅游 || bfs

    原题 题意: 一个多边形,三角剖分,求一条对角线最多能经过多少三角形 题解: 因为不涉及坐标之类的,所以根几何肯定一点关系都没有. 我们会发现,对于有共边的两个三角形,可以被同一条线穿过,而这就相当于 ...

  4. HDU.3342 Legal or Not (拓扑排序 TopSort)

    HDU.3342 Legal or Not (拓扑排序 TopSort) 题意分析 裸的拓扑排序 根据是否成环来判断是否合法 详解请移步 算法学习 拓扑排序(TopSort) 代码总览 #includ ...

  5. ContestHunter暑假欢乐赛 SRM 15

    菜菜给题解,良心出题人!但我还是照常写SRM一句话题解吧... T1经典题正解好像是贪心...我比较蠢写了个DP,不过还跑的挺快的 f[i]=min( f[j-a[j]-1] )+1  { j+a[j ...

  6. NOIP2016Day1T3换教室(floyd+期望dp)

    啊...这个时间写博客,明天还要上学,整个人都不好了... 这是我写的第一道期望题hiahiahia... 题目大意就不说了QWQ 80分儿做法:先floyd,爆搜枚举哪些点取,求出答案,效率O(C( ...

  7. Just Random HDU - 4790 思维题(打表找规律)分段求解

    Coach Pang and Uncle Yang both love numbers. Every morning they play a game with number together. In ...

  8. Service学习

    一.采用startService方式开启服务 1.写一个服务类 public class PhoneService extends Service { private static final Str ...

  9. 寻找最大连续子序列/Find the max contiguous subsequence

    寻找最大连续子序列 给定一个实数序列X1,X2,...Xn(不需要是正数),寻找一个(连续的)子序列Xi,Xi+1,...Xj,使得其数值之和在所有的连续子序列数值之和中为最大. 一般称这个子序列为最 ...

  10. 基于tcp交互的python聊天程序

    语言:Python 工具:MySQL,Tkinter,图灵机器人 功能:图形聊天工具,可以选择自动回复或者人工回复. 注意:如果运行需要自建mysql数据库表.还有安装各种模块.还有到“图灵机器人”申 ...