解决IE中placeholder的兼容问题
定义和用法
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。
该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
注释:placeholder 属性适用于以下的 <input> 类型:text, search, url, telephone, email 以及 password。
问题:
由于placeholder 属性是 HTML5 中的新属性,所以IE10以下不支持该属性,有问题就会有解决办法,我的方法就是,利用label和input组合,去模拟实现placeholder属性带来的效果,具体步骤如下:
HTML代码:
<!--搜索框-->
<div class="texts">
<input type="text"/><label for="text">毛巾 暖冬装备</label>
</div>
CSS代码:
.texts{
position:relative;
}
.texts>input{
width:238px;
height:26px;
line-height: 26px;
border:1px solid black;
/*输入文字时会与框头有间距*/
padding-left: 10px;
}
.texts>label{
position:absolute;
left:10px;
top:5px;
font-size:15px;
color:#b0b0b0;
cursor:text;
}
JS代码:
var oTexts=document.getElementsByTagName("input")[0];
var oLabel=oSearch.getElementsByTagName("label")[0];
/*文本框失去焦点时,此时若框内无值,则让框内提示文字(也就是label)显示,若框内有值,则隐藏提示文字*/
oTexts.onblur=function(){
if(this.value==""){
oLabel.style.display="block";
}else{
oLabel.style.display="none";
} };
//文本框获得焦点时,让提示文字(也就是label)隐藏
oTexts.onfocus=function(){
oLabel.style.display="none";
};
//点击提示文字时(也就是label),就让文本框获得焦点并且隐藏自己
oLabel.onclick=function(){
oLabel.style.display="none";
oTexts.focus();
};
原理简单而又巧妙,其实就是用一个标签去代替placeholder文本,用一个div包裹文本标签和label标签(也可以是别的标签),让他们分别相对于父级定位,做出placeholder实现的效果,接着就是JS的活儿了,我们要去分析在文本框获得焦点、失去焦点这些过程中,都出现了哪些动效,再将这些逻辑语言化为JS语言,其实不同的需求下,JS代码也会有所不同,只要掌握了原理,配到不同的需求,大家可以做出相应改变。
解决IE中placeholder的兼容问题的更多相关文章
- 解决input 中placeholder的那些神坑
**昨天后台小哥哥提到placehold无法显示问题,我这边总结一下,顺便写个小文章分享给大家..** ============================================== 一 ...
- placeholder 解决UITextField中placeholder和text文本同时显示的问题
TextField都使用了placeholder属性,但在代码中又设置了text属性,因此ViewController会同时显示placeholder文本和text文本. 这个问题让我彻底崩溃.按道理 ...
- 解决HTML5中placeholder属性兼容性的JQuery插件
//调用方法 $(function () { $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...
- placeholder不兼容 IE10 以下版本的解决方法
对于密码输入框placeholder的兼容问题:HTML代码:<input type="password" id="loginPassword" plac ...
- NullableKey:解决Dictionary中键不能为null的问题 zt
2012-12-29 02:26 by 老赵, 1745 visits 众所周知,.NET中Dictionary的键不能为null,否则会抛出NullReferenceException,这在某些时候 ...
- 解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...
- 解决li中文字行高对齐
<div class="A_content_1"> <li>座右铭: <input class="A_ct1" type=&quo ...
- iOS 解决LaunchScreen中图片加载黑屏问题
iOS 解决LaunchScreen中图片加载黑屏问题 原文: http://blog.csdn.net/chengkaizone/article/details/50478045 iOS 解决Lau ...
- 解决Android中No resource found that matches android:TextAppearance.Material.Widget.Button.Inverse问题
解决Android中No resource found that matches android:TextAppearance.Material.Widget.Button.Inverse问题http ...
随机推荐
- Spring框架入门之Spring简介
一.Spring简介(由Rod Johnson创建的一个开源框架) Spring是一个开放源代码的设计层面框架,他解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿 ...
- udev实现热插拔
一.UDEV是什么? Udev是一个针对Linux内核2.6的可提供自动创建的设备节点和命名的解决方法的一个文件系统:其实与/etc/目录下的fstab文件类似 二.Udev如何获取内核这些模块的变化 ...
- django[post与get测试]
首先先看一下代码:↓ 后台: 前端展示: 测试结果:
- ajax中url赋json格式的值时发生中文乱码的相关问题
具体流程:转入到jsp界面时会加载ajax,ajax转到url时传带hide在jsp界面的值titleString,其来源见下面的代码. String title=new String("\ ...
- CSS3对于盒中容纳不下的内容的显示——overflow属性
overflow属性 1.如果将overflow属性值设定为hidden,则超出容纳范围的文字将被隐藏起来. div{ overflow:hidden; } 2.如果将overflow属性值设定为sc ...
- bzoj:3397 [Usaco2009 Feb]Surround the Islands 环岛篱笆
Description 约翰在加勒比海买下地产,准备在这里的若干个岛屿上养奶牛.所以,他要给所有岛屿围上篱笆.每个岛屿都是多边形.他沿着岛屿的一条边界朝一个方向走,有时候坐船到另一个岛去.他可 ...
- POJ 3264 Balanced Lineup【线段树区间查询求最大值和最小值】
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 53703 Accepted: 25237 ...
- c# excel 导入 与 导出(可直接用)
c#操作excel方式很多 采用OleDB读取EXCEL文件: 引用的com组件:Microsoft.Office.Interop.Excel.dll 读取EXCEL文件 将EXCEL文件转化成C ...
- NYOJ 1248 海岛争霸(Dijkstra变形——最短路径最大权值)
题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=1248 描述 神秘的海洋,惊险的探险之路,打捞海底宝藏,激烈的海战,海盗劫富等等.加勒比 ...
- zzuli oj 1135 算菜价
题目: Description 妈妈每天都要出去买菜,但是回来后,兜里的钱也懒得数一数,到底花了多少钱真是一笔糊涂帐.现在好了,作为好儿子(女儿)的你可以给她用程序算一下了,呵呵. Input 输入含 ...