两种方法基于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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
Mar 04 Javascript
js尾调用优化的实现
May 23 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
JavaScript实现滑块验证解锁
Jan 07 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实现获取及设置用户访问页面语言类
2014/09/24 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
js调用flash的效果代码
2008/04/26 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
JS轮播图实现简单代码
2021/02/19 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python实现二叉树的遍历
2017/12/11 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python实现flappy bird游戏
2018/12/24 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
英语专业毕业个人求职自荐信
2013/09/21 职场文书
毕业生动漫设计求职信
2013/10/11 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
父母对孩子的寄语
2014/04/09 职场文书
公司股东合作协议书
2014/09/14 职场文书
工程承包协议书范本
2014/09/29 职场文书
社区活动总结范文
2015/05/07 职场文书
矛盾论读书笔记
2015/06/29 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
Python中with上下文管理协议的作用及用法
2022/03/18 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers