这是一个老问题,结合前辈们的经验,需要处理的问题有一下几个。

  1.只有输入框(input/textarea)下的palaceholder属性存在的时候才需要处理这类兼容

  2.处理好输入框上焦点和是焦点的文本显示

  3.密码输入框比较特殊,因为为其设置显示文本时显示的是一串“***”。这个问题后面分析。处理好前两点还是比较简单的,处理源码为如下

var browserSupport = {
placeholder: 'placeholder' in document.createElement('input')
} $(function() {
//模拟placeholder
if( !browserSupport.placeholder){
$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder'),
oldType;
if(that.val()===""){
that.val(text).addClass('placeholder');
}
that.focus(function(){
//ie8下readonly依然可以上焦点的处理
if(that.attr('readonly')){
that.blur();
return;
} that.removeClass('placeholder'); if(that.val()===text){
that.val("");
}
}).blur(function(){
if(that.val()===""){
that.val(text).addClass('placeholder');
//防止异常情况:当有placeholder类,且值不为空(代码设置值时容易出现)
}else{
that.removeClass('placeholder');
}
}).closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
}
});

  可以看出处理还是比较简单的。在不支持placeholder的浏览器下没有上焦点的为placeholder的空白输入框添加class placeholder并设置其内容为placeholder值。上焦点的placeholder的输入框判断其值是否是手动设置的placeholder值,如果是则重置输入框为空白。当然免不了提交表单的时候要清除兼容placeholder的影响。

  这里面有一个细节事件是绑定在标签对应的缓存中,而不是委托document等祖先节点,为什么?有两个考虑:1.避免有设置事件禁止冒泡导致绑定到document上的事件没法处理。2.事件执行的先后顺序是先执行绑定到自身节点的事件,然后在冒泡到document节点执行事件源委托到document的事件。

  

  至于第3点密码输入框的问题。我们首先考虑是当密码输入框失焦的时候先更改输入框的type为text类型然后按照正常的设置其值为placeholder值;聚焦的时候将type值设置回来并恢复其值。但是这个存在问题是IE8不允许更改type类型。没招了,只能额外的添加一个元素来展示密码输入框的placeholder值。结果完整的源码就变成了如下

/*
.placeholder{
color: #aaa!important;
}
span.placeholder{
position: absolute;
left: 0;
line-height: 34px;
padding-left: 12px;
}
*/
var browserSupport = {
placeholder: 'placeholder' in document.createElement('input')
} /* ajax请求发现未登录时,服务端返回401错误,然后此处统一处理401错误,跳转到登录页面 */
$(document).ready(function() {
//模拟placeholder
if( !browserSupport.placeholder){
$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder'),
oldType;
if(that.val()===""){
if(that.attr('type') != 'password'){
that.val(text).addClass('placeholder');
}else{
that.before('<span class="placeholder">请输入密码</span>'
);
}

}
that.focus(function(){
//ie8下readonly依然可以上焦点的处理
if(that.attr('readonly')){
that.blur();
return;
}
//清除span.placeholder
that.prev("span.placeholder").remove();
that.removeClass('placeholder'); if(that.val()===text){
that.val("");
}
}).blur(function(){
if(that.val()===""){
if(that.attr('type') != 'password'){
that.val(text).addClass('placeholder');
}else{
that.before('<span class="placeholder">请输入密码</span>');
}
//防止异常情况:当有placeholder类,且值不为空(代码设置值时容易出现)
}else{
that.removeClass('placeholder');
}
}).closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
$(document).on('click','span.placeholder',function(){
$(this).next("[placeholder]").focus();
//删除span.placeholder会在[placeholder]的focus中进行
})
}
})

  我自己专门添加了一个span.placeholder来显示密码输入框的占位符显示。然后添加了一个监听器监听span.placeholder被点击。

  功能是完成了,在测试的时候还是会遇到一个问题,浏览器有自动填写表单的时候初始化可能会出现异常,现在为止还没有什么好的方法捕获自动填写表单事件,结果可能导致密码输入框的placeholder显示和内容一起显示。所以如果要使用这种密码输入框的placeholder兼容方式,最好让浏览器不自动填充,也有利于信息保密:给密码input设置autocomplete=off即可。

  需要注意的是autocomplete=off在chrome下也有兼容问题,不过这里是专门给IE下用的到没有什么问题,只不过chrome下是没有保密而已。更多的信息自行百度。

  如果觉得本文不错,请点击右下方【推荐】!

placeholder的兼容处理(jQuery下)的更多相关文章

  1. placeholder不兼容 IE10 以下版本的解决方法

    对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...

  2. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  3. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  4. jQuery下拉友情链接美化效果代码分享

    这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...

  5. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  6. 解决HTML5中placeholder属性兼容性的JQuery插件

    //调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...

  7. 兼容现有jQuery API的轻量级JavaScript库:Zepo

    Zepo是一个JavaScript框架,其特点是兼容现有jQuery API的同时,自身体积十分小:它与jQuery有着类似的API.如果你会jQuery,那么也就会使用Zepto了. $('div' ...

  8. jquery下php与ajax的互传数据(json格式)自我总结

    研究了一整天的json数据与ajax的数据传输,现在进行一个小的自我总结,仅供参考 1.关于ajax的认识 $.ajax(),是jquery下包装好的一个函数:参考地址:http://www.w3sc ...

  9. jquery 下拉框 收藏

    jquery 下拉框  Query获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code. ...

随机推荐

  1. UML学习备忘

    两大类UML图: 行为图(behavior diagrams)和结构图(structure diagrams)     行为图将引导系统分析员分析且理清"系统该做些什么"?系统分析 ...

  2. ABP入门系列(3)——领域层创建实体

    这一节我们主要和领域层打交道.首先我们要对ABP的体系结构以及从模板创建的解决方案进行一一对应.网上有代码生成器去简化我们这一步的任务,但是不建议初学者去使用. 一.首先来看看ABP体系结构 领域层就 ...

  3. NativeScript 也能开发桌面应用 (nativescript-dotnet-runtime)

    自从看了NativeScript就甚是喜欢,心想要是也能开发桌面应用该多好.求人不如求己,开源组件很强大,差不多组装一下就行了,说干就干. Javascript 引擎用 Jint , 纯C#实现,集成 ...

  4. javascript检测ActiveX插件是否安装/启用

    本文主要提供在IE浏览器下检测ActiveX插件安装/启用的状态. 在一些应用开发中,需要用到一些第三方提供的ActiveX插件,如Flash插件. 为了在未安装插件的浏览器显示友好的提示,需要用到主 ...

  5. DataTables 控件使用和心得 (1) - 入门

    什么是DataTables DataTables是一个基于HTML/CSS/JavaScript的前端列表组件. 基于JQuery 开源并且免费(除特殊支持服务) 主要特色: 高性能,响应式,功能完整 ...

  6. UWP开发随笔——UWP新控件!AutoSuggestBox!

    摘要 要开发一款优秀的application,控件肯定是必不可少的,uwp就为开发者提供了各种各样的系统控件,AutoSuggestBox就是uwp极具特色的控件之一,也是相对于之前win8.1的ua ...

  7. [nRF51822] 5、 霸屏了——详解nRF51 SDK中的GPIOTE(从GPIO电平变化到产生中断事件的流程详解)

    :由于在大多数情况下GPIO的状态变化都会触发应用程序执行一些动作.为了方便nRF51官方把该流程封装成了GPIOTE,全称:The GPIO Tasks and Events (GPIOTE) . ...

  8. js模版引擎handlebars.js实用教程——if-判断的基本用法

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  9. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  10. linux环境 c 中如何执行shell命令

    1 system 相当简单: int system(const char *command); system("ps -aux"); 2 popen popen有两个参数,第一个是 ...