兼容ie浏览器的placeholder的几种方法
项目中遇到的问题，试了几种方法，今天整理出来，如果有不合适的地方，希望大家多多提意见。
- 第一种方法是：使用html新增的属性 “data-”来实现的，实现的时候，input框没有使用placeholer这个属性，但是却可以实现一样的效果并且兼容各大浏览器。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<title></title>
<style type="text/css" media="screen">
.inp {color: #666;}
</style>
</head> <body>
<input name="" datavalue="输入文字" class="ipt">
</body>
<script type="text/javascript">
$(function(){
function placeholder(target){ $(target).val($(target).attr("datavalue")).addClass("inp");
$(target).focus(function() {
if($(this).val() == $(this).attr("datavalue")) {
$(this).val("").removeClass("inp");
} })
$(target).blur(function(){
if($(this).val() == "" || $(this).val() == $(this).attr("datavalue")) {
$(this).val($(target).attr("datavalue")).addClass("inp");
}
})
}
placeholder(".ipt")
})
</script>
</html>在上述的代码中，我将主要实现的代码封装了一个方法，因此等到下次再要使用的时候，可以直接调用placeholder(".ipt")这个函数即可，输入input的class值。
说明一下：.inp这个class,是为了实现和placeholder一样的显示效果。当使用的是placeholder提示的话，字体得颜色是#666的。 - 第二种方法:在第二种方法中，我们使用了判断ie浏览器的版本来实现的。我们都知道，placeholder主要是不兼容ie10-以下的版本，所以当用户使用的是ie10-以下的浏览器的时候，我们就会使用一个span标签来模拟提示。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<title></title>
<style type="text/css" media="screen">
.spn {position: absolute;font-size: 14px;left: 10px;top: 9px;display: none;color:#666;}
</style>
</head> <body>
<input type="text" name="" placeholder="输入文字" class="ipt">
<span class="spn">输入文字</span>
</body><script type="text/javascript">
$(function(){
function placeholder(target){
var browser=navigator.appName var b_version=navigator.appVersion var version=b_version.split(";"); var trim_Version=version[1].replace(/[ ]/g,""); if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0" || browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0" || browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0") {
$(target).siblings("span").show();
$(target).focus(function() {
$(this).siblings("span").hide();
})
$(target).blur(function(){
if($(this).val() == "") {
$(this).siblings("span").show();
}
})
}
} placeholder(".ipt")
})
</script></html>
- 第三种方法：第三种方法使用了 浏览器判断是否支持placeholder属性，如果支持的话，就是正常显示就好了。如果不支持，会调用placeholder函数，当input框获得焦点时，比较input框的值是否等于默认值，如果等于，则置空。当input框失去焦点的时候，如果input框的值为空，则将保存的默认值赋值给它。并且添加class将字体颜色设为#666.当在input框输入值的时候，移除phcolor这个class，输入的字符不是灰色的。
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style type="text/css">
.phcolor{ color:#666;}
.box {position:relative;font-size: 14px;}
.box span{position: absolute;left: 0px;font-size: 14px;display: none;}
</style>
</head>
<body>
<div class="box">
<input class="ipt" placeholder="输入文字" type="text"></input>
<span class="ipt_abs">输入文字</span>
</div> </body>
<script type="text/javascript"> $(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));
}
})
}
})
</script>
</html>结束语：这几种方法是目前亲测过，第一种以及第二种是比较合适的方法，第三种方法，楼主感觉还是有一点问题，希望大家测出来问题的，及时与我联系哈。
第二种实现方法也是可以运行的，但是上次做项目的时候，不知道为什么，单个的页面运行都没有问题，放到项目中的话，就会对别的功能造成影响，一直运行不了。因此楼主才重新想了第一种方法。不过第一种方法也是挺好用的。希望大家多多提意见哈
兼容ie浏览器的placeholder的几种方法的更多相关文章
- 兼容IE浏览器的placeholder【超不错】
jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...
- 清理浏览器网站缓存的几种方法（meta,form表单，ajax）
1.meta方法 HTML header中加入 <meta http-equiv="pragma" content="no-cache"> 说明 ...
- 兼容IE8浏览器移除class样式的方法
项目中发现,IE8下不兼容JQ的removeClass和addClass,页面无效果 网上找了很多方法都没有效果,最终找到一个很好的笨方法 var div=document.getElementByI ...
- 用Fiddler可以设置浏览器的UA 和 手动 --Chrome模拟手机浏览器（iOS/Android）的三种方法，亲测无误！
附加以一种软件的方法是:用Fiddler可以设置浏览器的UA 以下3种方法是手动的 通过伪装User-Agent,将浏览器模拟成Android设备. 第一种方法:新建Chrome快捷方式 右击桌面上的 ...
- CSS让图片垂直居中的几种技巧 三种方法介绍
在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...
- JavaScript数组去重的10种方法
「数组去重」的确是个老生常谈的问题了,但是你真正的掌握了吗?平时开发中是不是用最简单粗暴的方法来去重?注意到它的性能问题了吗?当面试官对你回答的四个去重方法都不满意时你可以想出更简单且性能能更好的方法 ...
- css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局 这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- 自动生成数学题型一 (框架Struts2) 题型如（a+b=c）
1. 加减乘除 1.1 随机生成制定范围的整数 /** * 随机产生一个被限定范围的整数 * * @param num1 * 定义起始范围 num1 * @param num2 * 定义终止范围 nu ...
- YARN学习总结
YARN学习总结 前言 YARN(Yet Another Resource Manage,另一种资源协调者)是hadoop-0.23版本引入的的一个新的特性,可以说它是对原有Hadoop Mapred ...
- WebGIS中使用ZRender实现前端动态播放轨迹特效的方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要在地图上以时间轴方式播放人员.车辆在地图上的历史行进 ...
- HDU 5008 求第k小子串
本题要求第k小的distinct子串,可以根据height数组,二分出这个第k小子串所在后缀的位置信息.由于题目要求子串起始下标尽可能小.所以再在rank数组中,二分出与当前后缀LCP大于等于所求子串 ...
- Linux基础（6）
Linux基础(六) shell脚本中的三大循环和函数知识点 一.流程控制之if结构 1.简单的if实例: #!/bin/bash var='/etc/init.d' #var='/dev/sda' ...
- 基于Activiti的流程应用开发平台JSAAS-WF V5.3
第1章 产品概述及体系架构 1.1.概述 红迅JSAAS-WF工作流平台V5是广州红迅软件有限公司面向合作伙伴以及有IT运维团队中大型企业提供新一代的流程管理产品,它基于流行的JAVA开源技术上构建, ...
- phpcms笔记
一.建立虚拟站点 1.先更改www目录下的站点名称,再找到apache, 打开"Apache2\conf\extra"下的"httpd-vhosts.conf" ...
- 简单明了查看内存使用和ubuntu的版本号及位数
1.查看ubuntu的版本号:cat /etc/issue 2.查看系统是32位的还是64位:getconf LONG_BIT 3.查看内存使用 free free命令可以用来查看系统内存使用情况,- ...
- VM VirtrualBox 安装centos6.5后的网络设置
小白学习linux(一) 本文只是介绍VirtrualBox安装centos完成后的网络设置: 每次用虚拟机装完centos后,捣鼓半天才能上网.熟话说的好,好记性不如烂笔头,写个随笔记录下设置过程, ...
- 转：Centos6.5_x86安装Redis。
Redis是一个高性能的,开源key-value型数据库.是构建高性能,可扩展的Web应用的完美解决方案,可以内存存储亦可持久化存储.因为要使用跨进程,跨服务级别的数据缓存,在对比多个方案后,决定使用 ...