两种方法基于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插件之多图片异步上传
Oct 20 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
Boostrap实现的登录界面实例代码
Oct 09 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
js数组方法reduce经典用法代码分享
Jan 07 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
Vuex之理解state的用法实例
2017/04/19 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
python实现俄罗斯方块游戏
2020/03/25 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
社区交通安全实施方案
2014/03/22 职场文书
公司门卫工作职责
2014/06/28 职场文书
护士实习自荐信
2015/03/06 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
学生会工作感言
2015/08/07 职场文书