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 ...
随机推荐
- Android-往来:添加到联系人
//添加到联系人.使用事务 public void testAddContact() { String name[]={"周杰伦","谢霆锋","言承 ...
- Sql示例说明如何分组后求中间值--【叶子】
原文:Sql示例说明如何分组后求中间值--[叶子] 这里所谓的分组后求中间值是个什么概念呢? 我举个例子来说明一下: 假设我们现在有下面这样一个表: type name price -- ...
- UVA 810 - A Dicey Problem(BFS）
UVA 810 - A Dicey Problem 题目链接 题意:一个骰子,给你顶面和前面.在一个起点,每次能移动到周围4格,为-1,或顶面和该位置数字一样,那么问题来了,骰子能不能走一圈回到原地, ...
- quick-cocos2d-x游戏开发【5】——创建菜单
一个菜单是游戏中的一个基本要素,quick在里面menuItem有两个包.一个是图片菜单.一个文本菜单. 一个.图片菜单ui.newImageMenuItem(params) 參数: image: 正 ...
- php学习之道：mysql SELECT FOUND_ROWS()与COUNT(*)使用方法差别
在mysql中 FOUND_ROWS()与COUNT(*)都能够统计记录.假设都一样为什么会有两个这种函数呢.以下我来介绍SELECT FOUND_ROWS()与COUNT(*)使用方法差别 SELE ...
- Class loader:static
package classloader; public class ClassLoaderDisplayDemo { public static void main(String[] args) { ...
- Mule ESB-Content-Based Routing Tutorial（2）
承接 Mule ESB-Content-Based Routing Tutorial(1) 五.执行应用程序 完毕创建,配置.并保存你的新的应用程序,您就能够在嵌入Mule的server上执行(包含 ...
- IOS View传统的价值观之间
1.采用NSUserDefaults通过值,这样的方法不限于传送少量数据的: 比方你要传一个float的值.在须要传的时候用 [[NSUserDefaults standardUserDefaults ...
- What day is it
Description Today is Saturday, 17th Nov,2007. Now, if i tell you a date, can you tell me what day it ...
- xdebug的安装和配置方法
首先让php错误显示,仅仅须要改动php.ini其中的2条指令,把 displayerrors和htmlerrors都设置为On,例如以下所看到的 html_errors = On di ...