input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题:
1、IE8 下不兼容
处理思路:
如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿placeholder属性的样式,并给input 的value赋值placeholder属性的值
2、 input的type属性是password的情况,用上面的方法处理提示语为密码文
处理思路:
新添加一个标签,模仿placeholder属性
直接上代码:
css部分:
.input-item {
position: relative;
margin: 10px;
}
.pwd-place {
position: absolute;
top:;
left: 72px;
width: 100%;
height: 100%;
font-size: 12px;
}
html部分:
<form action="#">
<div class="input-item">
<label for="userName">用户名:</label>
<input class="username" id="userName" type="text" placeholder="请输入用户名">
</div>
<div class="input-item">
<label for="pwd">密码:</label>
<input class=" password" id="pwd" type="password" placeholder="请输入密码">
<span class="pwd-place"></span>
</div> </form>
js部分:
<script src="jquery-1.11.3.js"></script>
<script>
function placeholder(el){ function isPlaceholer(){
var input = document.createElement("input");
return "placeholder" in input;
} var $el = $(el);
if( isPlaceholer()==false && !('placeholder' in document.createElement('input')) ){ $('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder');
if(that.val()===""){
if(that.attr("type") == "password"){
$el.html("请输入密码");
}else {
that.val(text).addClass('placeholder');
}
}
that.focus(function(){
if($el.html() == text){
$el.html("");
}
if(that.val()===text) {
that.val("").removeClass('placeholder'); }
})
.blur(function(){
if(that.val()==="") {
if (that.attr("type") == "password") {
$el.html("请输入密码"); }else {
that.val(text).addClass('placeholder');
}
}
})
.closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
}
}
$(document).ready(function() {
placeholder(".pwd-place")
});
</script>
input 的 placeholder属性在IE8下的兼容处理的更多相关文章
- input输入框的border-radius属性在IE8下的完美兼容
在工作中我们发现搜索框大部分都是有圆角的,为此作为经验不足的前端人员很容易就想到,给input标签添加border-radius属性不就解决了嘛.不错方法确实是这样,但是不要忘了border-radi ...
- Hmtl5 <input>中placeholder属性(新属性)
Hmtl5 <input>中placeholder属性(新属性) 一.定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示 ...
- 解决input标签placeholder属性浏览器兼容性问题的一种方法
为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...
- 修改 input / textarea placeholder 属性的颜色和字体大小
话不多说,直接上代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #666; fon ...
- 前端 html input标签 placeholder属性 标签上显示内容
前端 html input标签 的placeholder属性 标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...
- IE8下的兼容小经验
placeholder IE8下不支持HTML5属性placeholder,不过为解决此问题的js插件挺多的,比如:jquery-placeholder.也可以使用jquery来写. last-chi ...
- bootstrap在ie8下,兼容媒体查询
最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...
- ie8不兼容input的placeholder属性但是要实现其效果的方法
通过学习前辈的思想,个人想法整理如下: 通过两个元素标签,仿造出placeholder的内容 使用position定位好两个元素标签 第一要隐藏两个元素标签display:none,在<!--[ ...
- angular自定义指令解决IE89不支持input的placeholder属性
下面代码实测通过,直接copy到本地运行即可. <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
随机推荐
- linux 文件、文件夹的重命名命令
linux中没有重命名命令,一般用mv替代.如将test更名为testsmv test tests隐藏是mv test .test 说到文件的隐藏,linux下文件如果想隐藏起来只要重命名这个文件就可 ...
- Oracle Form Developer: Folder FRM-99999 Error 14212
Question: 做FOLDER文件夹功能,打开FORM错误提示: FRM-99999:出现1412错误.有关该错误的详细信息,请参阅发行说明文件(relnotes) Answer: 原因是FOLD ...
- Samba ‘dcerpc_read_ncacn_packet_done’函数缓冲区溢出漏洞
漏洞名称: Samba ‘dcerpc_read_ncacn_packet_done’函数缓冲区溢出漏洞 CNNVD编号: CNNVD-201312-169 发布时间: 2013-12-12 更新时间 ...
- zoj 1033 与其说是搜索,不如说是枚举
zoj 与其说是搜索,不如说是枚举,只不过是通过搜索来实现的罢了. 主要是要注意好闰年的判断,特别是要注意好一串数字的划分. 题意其实我也看了一个晚上,才渐渐的看懂. 题意: 给你一个字符串,其中包含 ...
- 《C#并行编程高级教程》第3章 命令式任务并行 笔记
Task的使用 var t1 = new Task(() => GenerateAESKeys());var t2 = new Task(() => GenerateMD5Hashes() ...
- C# 获取ttf文件字体名称
1.第一种方法 using System.Windows.Media; String fontFilePath = "PATH TO YOUR FONT"; GlyphTypefa ...
- Android Support v4、v7、v13的区别和应用场景
N久未做android了,以前做的时候,2.2才刚出来,现在android都更新到了4.3了,而从前一段时间android各个sdk版本市场占有率 来看,1.6.2.1还是占有一定的市场,故在有些时候 ...
- 知识面 z
http://blog.csdn.net/sxhelijian/article/details/23163683 有了较宽和知识面,面对复试中不知道的问题,回答可以是:“这个问题,直接回答我没有把握, ...
- dev combobox edit 怎么设置让选项清空
dev combobox edit 怎么设置让选项清空 功能需求: 点击combobox edit1的选项A 使得 combobox edit2出现选项a: 然后再点击combobox edit1的选 ...
- 尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题。
从10G开始,Oracle提供了一个较为轻量级的客户包,叫做Instant Client. 将它安装好后,就不用再安装庞大的Oracle Client了. 这样一来,只要客户端下载Instant Cl ...