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

  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. Python小爬虫练习

    # coding: utf-8 __author__ = 'zhangcx' from urllib3 import PoolManager import codecs import json cla ...

  2. maven配置阿里云镜像

    编辑%maven_home%/conf/settings.xml文件,添加 <mirror> <id>aliyun-maven</id> <mirrorOf& ...

  3. WebView一般用法总结

    下面是webview常规的用法: import android.annotation.SuppressLint;import android.app.Activity;import android.o ...

  4. Invalidate,Update与Refresh的区别

    在做Windows Forms开发的时候,免不了需要手动刷新窗口,以重绘所需更改的控件,或其它什么的.当出现这类需求时,你有三个选择,使用Invalidate,Update或者Refresh方法. I ...

  5. 控件UI性能调优 -- SizeChanged不是万能的

    简介 我们在之前的“UWP控件开发——用NuGet包装自己的控件“一文中曾提到XAML的布局系统 和平时使用上的一些问题(重写Measure/Arrange还是使用SizeChanged?),这篇博文 ...

  6. 基于zepto的移动端日期+时间选择插件

    前段时间写了两个移动端的日期选择插件:轻量级移动端日期选择器,本来是为特定的场景中使用的,结果有同学反应不够灵活和强大.虽然我的看法是移动端的界面要尽可能简洁,功能要尽可能简单,但是难免还是会有各种各 ...

  7. Unity3D使用经验总结 优点篇

    09年还在和其它小伙伴开发引擎的时候,Unity3D就初露头角. 当时就对这种基于组件式的设计结构很不理解. 觉得拆分过于细致,同时影响效率. 而时至今日,UNITY3D已经成为了众多团队的首选3D引 ...

  8. 手把手教你用python打造网易公开课视频下载软件5-python生成exe程序

    python程序生成exe文件,使用的是py2exe扩展包,下面写下具体的步骤: 第一步:新建conver2exe.py,内容如下: #coding:utf-8 from distutils.core ...

  9. 手把手教你用python打造网易公开课视频下载软件2-编码相关说明

    函数getdownLoadInfo(url)主要实现核心功能:根据url地址,获取课程信息:课程名(courseTitle),课程数目(courseCount),可下载视频数目(videoCount) ...

  10. jmx server 和jmx client

    启动jmx server 和jmx client,通过jconsole进入jmx server 然后通过其中远程进程,进入jmx client: 发现,两者可用的tab页不同, MBean的数量类型也 ...