两种方法基于jQuery实现IE浏览器兼容placeholder效果


Posted in Javascript onOctober 14, 2014

placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 )中会有略微不同的显示效果:

在Chrome( v31.0.1650.63 m)、Firefox( v21.0 )、360安全( v6.3 极速模式 )中,输入栏获得焦点后,提示文字并不消失,如图( Chrome ):

获得焦点前:

两种方法基于jQuery实现IE浏览器兼容placeholder效果

获得焦点时:

两种方法基于jQuery实现IE浏览器兼容placeholder效果

偏偏IE11要搞点特殊:

获得焦点前:

两种方法基于jQuery实现IE浏览器兼容placeholder效果

获得焦点时:

两种方法基于jQuery实现IE浏览器兼容placeholder效果

也就是说获得焦点时提示的文字会消失。

非现代浏览器( 例如 IE6-IE9 )是不支持placeholder属性的。现在用jQuery来使这些非现代浏览器也同样能能实现placeholder的显示效果,第一种方法实现的是IE11这种效果,也就是输入框获得焦点时提示文字会消失;如果要想获得类似Chrome的效果,即输入框获得焦点时提示文字并不消失,可以使用第二种方法。

方法一

效果预览:

http://jsfiddle.net/L57b25yr/embedded/result/

思路是,首先判断浏览器是否支持placeholder属性,如果不支持的话,就遍历所有input输入框,获取placeholder属性的值填充进输入框作为提示信息,同时字体设置成灰色。

当输入框获得焦点( focus )同时输入框内文字等于设置的提示信息时,就把输入框内清空;

当输入框失去焦点( blur )同时输入框内文字为空时,再把获取的placeholder属性的值填充进输入框作为提示信息,同时字体设置成灰色;

当输入框内有输入( keydown )时,此时输入框内的提示信息已经由focus事件清除,此时只需要把字体再恢复成黑色即可。

此方法的缺点是,不适用于加载完DOM时即获得焦点的输入框,因为在用户的角度,加载完页面时看到的获得焦点的那个输入框,它的提示文字是看不到的。

HTML:

<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>

CSS:

.phcolor{ color:#999;}

JS:

$(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"){

        placeholder($(this));
      }
    });
  }

});

经过测试可以达到IE11placeholder的显示效果。

方法二

此方法的思路是做一张含有提示文字的图片作为input输入框的背景图,初始时获得焦点同时加载背景图;

背景图如下:

两种方法基于jQuery实现IE浏览器兼容placeholder效果

当输入框不为空时,去掉背景图;

当输入框为空时,加载背景图;

当用户键盘按键且输入框不为空( 输入字符 )时,去掉背景图;

当用户键盘按键且输入框为空( 删除字符 )时,加载背景图。

此方法的缺点是:需要为每一个提示文字不同的input制作背景图片,并且设置input的样式。

HTML代码不变。

CSS:

.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}

JS:

$(function(){  

   //判断浏览器是否支持placeholder属性
   supportPlaceholder='placeholder' in document.createElement('input');

   if(!supportPlaceholder){

     //初始状态添加背景图片
     $("#uname").attr("class","phbg");
     //初始状态获得焦点
     $("#uname").focus;

     function destyle(){
     
      if($("#uname").val() != ""){
        
        $("#uname").removeClass("phbg");
      }else{
      
        $("#uname").attr("class","phbg");
       }
     }
     
     //当输入框为空时,添加背景图片;有值时去掉背景图片
     destyle();

     $("#uname").keyup(function(){

      //当输入框有按键输入同时输入框不为空时,去掉背景图片;有按键输入同时为空时(删除字符),添加背景图片
      destyle();
     });

     $("#uname").keydown(function(){
     
      //keydown事件可以在按键按下的第一时间去掉背景图片
      $("#uname").removeClass("phbg");
     });
   }
});

此方法至此结束。

此方法在IETester的IE8下显示效果:

获得焦点时:

两种方法基于jQuery实现IE浏览器兼容placeholder效果

失去焦点时:

两种方法基于jQuery实现IE浏览器兼容placeholder效果

有输入时:

两种方法基于jQuery实现IE浏览器兼容placeholder效果

如果有朋友有更好的方法,欢迎交流讨论。

Javascript 相关文章推荐
JavaScript基础知识之数据类型
Aug 06 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
JS跨域问题详解
Nov 25 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 #Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 #Javascript
js网页右下角提示框实例
Oct 14 #Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 #Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 #Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 #Javascript
javascript实现分栏显示小技巧附图
Oct 13 #Javascript
You might like
php获取汉字首字母的函数
2013/11/07 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
Python中new方法的详解
2019/01/15 Python
Django Form 实时从数据库中获取数据的操作方法
2019/07/25 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
一套SQL笔试题
2016/08/14 面试题
美德好少年事迹材料
2014/01/19 职场文书
测量工程专业求职信
2014/02/24 职场文书
公立医院改革实施方案
2014/03/14 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
售房协议书范本2014
2014/10/23 职场文书
圣诞节开幕词
2015/01/29 职场文书
党小组评议意见
2015/06/02 职场文书
反邪教教育心得体会
2016/01/15 职场文书
个人道歉信大全
2019/04/11 职场文书