IE低版本下实现html5的placeholder(表单提示)功能
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
demo例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>placeHolder</title>
</head>
<input type="text" id="fileElem" placeholder = "sssss" >
<input type="text" id="fileElem1" placeholder = "XXXXXXXXXXXXXXXXXX" >
<input type="text" id="fileElem" placeholder = "11111" >
<input type="text" id="fileElem" placeholder = "sss2222ss" >
<input type="text" id="fileElem" placeholder = "33333" >
<input type="text" id="fileElem" placeholder = "444444" >
<input type="text" id="fileElem" placeholder = "666666" >
<textarea placeholder="7777777777777777777">
</textarea>
<script>
var placeHolder = {
box:function(){
var obj = [];
var text = document.getElementsByTagName('input');
var textarea = document.getElementsByTagName('textarea');
for(var i=0;i < text.length;i++){
if(!!text[i].getAttribute('placeholder')){
obj.push(text[i]);
}else{
continue;
}
}
for(var j=0;j < textarea.length;j++){
if(!!textarea[j].getAttribute('placeholder')!=''){
obj.push(textarea[j]);
}else{
continue;
}
}
return obj;
},
IsSpport:function(){
var input = document.createElement('input');
return "placeholder" in input;
},
init:function(){
if(!this.IsSpport()){
var obj = this.box();
for(var i = 0;i < obj.length;i++){
obj[i].value = obj[i].getAttribute('placeholder');
obj[i].onfocus = function(e){
if(this.value == this.getAttribute('placeholder')){
this.value = '';
}
}
obj[i].onblur = function(){
if(this.value == ''){
this.value = this.getAttribute('placeholder');
}
}
}
}
}
}.init();
</script>
直接执行上诉js代码即可！谷歌，等高版本浏览器没效果！在IE低版本下测试！
IE低版本下实现html5的placeholder(表单提示)功能的更多相关文章
- HTML5新增的表单验证功能
一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...
- angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- 玩转html5(三)---智能表单（form），使排版更加方便
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
- HTML5 学习笔记 表单属性
HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...
- [H5表单]html5自带表单验证体验优化及提示气泡修改
慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...
- html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
随机推荐
- ssh无密码登陆（转）
[0]写在前面 由于ssh 实现的是免密码登陆,大致步骤是: 0.1) client通过ssh登陆到server: 0.2) server检查家目录下的.ssh文件, 并发送公钥文件 authoriz ...
- Linux内核导出符号宏定义EXPORT_SYMBOL源代码分析
资源: <include/linux/moudule.h> --. #ifndef MODULE_SYMBOL_PREFIX #define MODULE_SYMBOL_PREFIX &q ...
- 新安装Win10
随着微软发布Windows 10下载技术预览版.现在,您可以免费下载Windows 10技术预览ISO档,安装和开放经验. Windows 10技术预览提供的第一部英语.中国简体.葡萄牙语,含32位. ...
- HR系统邮件审批功能总结
时至今日,来兰亭工作的第三个小任务算是暂时告一段落了.这个小任务是耗费时间最长的,因此在这里总结整理一下. 首先这个功能的出发点是方法领导进行手下员工的审批,包括加班申请,休假申请,和漏打卡申请.由于 ...
- UVA 11987 - Almost Union-Find(并查集)
UVA 11987 - Almost Union-Find 题目链接 题意:给定一些集合,操作1是合并集合,操作2是把集合中一个元素移动到还有一个集合,操作3输出集合的个数和总和 思路:并查集,关键在 ...
- 解决RecyclerView无法onItemClick问题
供RecyclerView采用.会员可以查看将替代ListView的RecyclerView 的使用(一),单单从代码结构来说RecyclerView确实比ListView优化了非常多.也简化了我们编 ...
- Hadoop-1.1.2、HBase-0.94.7完全分布式集群结构
爱的技术可以应用到实际生活生产,做艺术向往的东西不腻和音乐. 现将前期手里面的一个项目做一个大致的总结,与大家一起分享.交流.进步. 项目如今正在线上执行,项目名--基于Hadoop的数据分析综合管理 ...
- Java迭代器[转]
迭代器是一种模式,它可以使得对于序列类型的数据结构的遍历行为与被遍历的对象分离,即我们无需关心该序列的底层结构是什么样子的.只要拿到这个对象,使用迭代器就可以遍历这个对象的内部. 1.Iterator ...
- C++ 在dynamic_cast<>用法
/*这是从网上断开的试样.主要是关于 dynamic_cast<> 用法.*/ /* 行动:对象指向一个基类(或参考)cast一个指向派生类,dynamic_cast将基于一个基类指针确实 ...
- ASP.NET MVC2.0 自定义filters
今天大家共同学习下ASP.NET MVC2.0中自定义filters,这一节主要学习下ActionFilterAttribute, ActionFilterAttribute继承IActionFilt ...