1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>jQuery实现IE浏览器兼容placeholder效果</title>
  7.     <style type="text/css">
  8.     * {
  9.         margin: 0;
  10.         padding: 0;
  11.     }
  12.  
  13.     .input {
  14.         width: 200px;
  15.         height: 30px;
  16.         line-height: 30px;
  17.         padding: 0 10px;
  18.         border: 1px solid #ddd;
  19.         margin: 20px auto;
  20.         display: block;
  21.     }
  22.     </style>
  23. </head>
  24.  
  25. <body>
  26.     <input type="text" placeholder="请输入姓名" class="input" />
  27.     <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
  28.     <script type="text/javascript">
  29.     $(function() {
  30.  
  31.         //判断浏览器是否支持placeholder属性
  32.         supportPlaceholder = 'placeholder' in document.createElement('input'),
  33.  
  34.             placeholder = function(input) {
  35.  
  36.                 var text = input.attr('placeholder'),
  37.                     defaultValue = input.defaultValue;
  38.  
  39.                 if (!defaultValue) {
  40.  
  41.                     input.val(text).addClass("phcolor");
  42.                 }
  43.  
  44.                 input.focus(function() {
  45.  
  46.                     if (input.val() == text) {
  47.  
  48.                         $(this).val("");
  49.                     }
  50.                 });
  51.  
  52.                 input.blur(function() {
  53.  
  54.                     if (input.val() == "") {
  55.  
  56.                         $(this).val(text).addClass("phcolor");
  57.                     }
  58.                 });
  59.  
  60.                 //输入的字符不为灰色
  61.                 input.keydown(function() {
  62.  
  63.                     $(this).removeClass("phcolor");
  64.                 });
  65.             };
  66.  
  67.         //当浏览器不支持placeholder属性时，调用placeholder函数
  68.         if (!supportPlaceholder) {
  69.  
  70.             $('input').each(function() {
  71.  
  72.                 text = $(this).attr("placeholder");
  73.  
  74.                 if ($(this).attr("type") == "text") {
  75.  
  76.                     placeholder($(this));
  77.                 }
  78.             });
  79.         }
  80.  
  81.     });
  82.     </script>
  83. </body>
  84.  
  85. </html>

效果图：

jQuery实现ie浏览器兼容placeholder效果的更多相关文章

  1. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  2. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  3. jQuery 两种方法实现IE10以下浏览器的placeholder效果

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 测试的浏览器:IE8,IETester下的IE6-IE9** Author:博客园小dee */ placeholder是H ...

  4. ie兼容placeholder效果

    转载:http://www.jb51.net/article/56244.htm placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 ...

  5. Jquery ajaxSubmit()的浏览器兼容问题

    form.ajaxSubmit({ 2 beforeSubmit: function() { 3 if (FinanceUtil.validate(form)) { 4 FinanceUtil.loa ...

  6. 低版本IE内核浏览器兼容placeholder属性解决办法

    最简便的一个方法,通过js实现. <input type="text" name="username" id="username" v ...

  7. 兼容IE浏览器的placeholder【超不错】

    jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...

  8. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  9. IE下支持文本框和密码框placeholder效果的JQuery插件

    基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...

随机推荐

  1. shell编程——内部变量

    常用的内部变量有:echo, eval, exec, export, readonly, read, shift, wait, exit 和 点(.) echo:将变量名指定的变量显示到标准输出 [r ...

  2. My97DatePicker日期控件的使用

    本文演示如何在MyEclipse项目中使用My97DatePicker日期控件 1.下载My97DatePicker日期控件, My97DatePicker日期控件下载地址 2.在MyEclipse项 ...

  3. SQL Pretty Printer不错的sql格式化工具

    之前使用过sql server 2000的查询设计器和Toad for oracle 都有格式化Sql语句的功能,感觉很方便,尤其对于我这种有着轻微强迫症的人来说.当最近把SQL Server Man ...

  4. servicestack.redis工具类

    using System;using System.Collections.Generic;using System.Linq;using ServiceStack.Redis;using Servi ...

  5. 每天一个Qt类之QWidget

    每天一个Qt类之QWidget QWidget类是所有用户界面对象的基类 继承QObject和QPaintDevice 被QButton.QFrame.QDialog.QComboBox.QDataB ...

  6. 让你大开眼界的10款Android界面设计

    根据调查显示, iOS与Android的市场份额差距正越来越大.Android设备正在成为手机应用市场的主力军.如何从设计层面创造一个优美的app界面来吸引用户已然成为广大App开发者们必做的功课之一 ...

  7. ACM暑假培训宣讲稿

    (鞠躬)感谢大家的掌声! 我上台来作这次的宣讲,首先要感谢大家的捧场(当然,这是一句玩笑话),其实吧,我要感谢一下我们ACM班老大(班长),hjh队友,是他指派我来的,给了我这个宝贵的机会.最要感谢的 ...

  8. PCA 原理

      PCA的数学原理(转) 1 年前 PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取 ...

  9. [GO]timer的应用

    package main import ( "time" "fmt" ) func main() { //创建一个定时器,设置时间为2s,2s后,往time.C ...

  10. Yii2.0 多语言设置(高级版配置方法) - 新的方法

    1.设置默认语言:在mail.php配置文件加上:'language'=>'zh_CN'; 2.多语言切换 (我这边是在site控制器里面操作的所以用的'/site/language') htm ...