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(表单提示)功能的更多相关文章

  1. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  2. angular 1.2.29版本下 动态添加多个表单、 校验全部、 提交 、ng-form方案

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

  4. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  5. 玩转html5(三)---智能表单（form），使排版更加方便

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  6. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

  7. [H5表单]html5自带表单验证体验优化及提示气泡修改

    慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了.还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程.今天就稍微说一下表单验证!另外 ...

  8. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  9. 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能

    当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...

随机推荐

  1. [搜索] hdu 4016 Magic Bitwise And Operation

    主题链接: http://acm.hdu.edu.cn/showproblem.php?pid=4016 Magic Bitwise And Operation Time Limit: 6000/30 ...

  2. 蜗牛—苍茫IT文章大学的路(十)

    昨晚,有个叫***培训机构鼓吹我们学校.起初我还以为是介绍这个游戏吧.谁知道.它原来是一个培训结构.去年我买的表啊 我知道这会不会去,我也浪费了时间审查.因为今天下午和晚上来测试啊.我没有审查,. 当 ...

  3. Scala课程01

    Scala课程01 简介 由于本人刚毕业,也是从事软件开发相关的工作.想再学习一下关于大数据.移动互联网.云计算相关的技术.为我的未来打好基础.并且从零开始学习大数据相关的知识,脚踏实地的走好每一步, ...

  4. thinkphp学习笔记3—项目编译和调试模式

    原文:thinkphp学习笔记3-项目编译和调试模式 1.项目编译 在章节2.4项目编译中作者讲到使用thinkphp的项目在第一次运行的时候会吧核心需要加载的文件去掉空白和注释合并到一个文件中编译并 ...

  5. sql多表查询之一：Where 和 On的秘密

    原文 sql多表查询之一:Where 和 On的秘密 对于还在SQL初级阶段的朋友来说,sql多表查询问题是一个比较有趣也容易出错的技术.什么时候会用到sql多表查询呢?是在两张或两张以上表单中通过某 ...

  6. jquery中DOM的操作方法

    先介绍几个比较简单的方法,不经常用到,做个记录 1. filter() 方法 顾名思义,filter是一个过滤器,如果给定表示 DOM 元素集合的 jQuery 对象,.filter() 方法会用匹配 ...

  7. C#操作Xml：使用XmlWriter写Xml

    假定创建了XmlWriter的实例变量xmlWriter,下文中将使用此实例变量写Xml 1.如何使用XmlWriter写Xml文档声明 ? // WriteStartDocument方法可以接受一个 ...

  8. php_cawler_html嵌套标签清洗

    主要处理 嵌套 div,正则无法很好的处理清洗 比如文本: 想要移除 class =quizPutTag 的div ,内部可能嵌套的还有未知层级的div[前提是html文本段是闭合标签的] 这是< ...

  9. 【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点？如天安门附近所有的餐厅、加油站、宾馆、大厦等

    原文:[百度地图API]如何用圆形搜索获取中心点周围100米内全部关键点?如天安门附近所有的餐厅.加油站.宾馆.大厦等 摘要: 在LBS上有这样一个常用的功能,查找附近所有的关键点(POI点,比如标志 ...

  10. 基础总结篇之五：BroadcastReceiver应用具体解释

    問渠那得清如許?為有源頭活水來.南宋.朱熹<觀書有感> 据说程序猿是最爱学习的群体,IT男都知道,这个行业日新月异,必须不断地学习新知识,不断地为自己注入新奇的血液,才干使自己跟上技术的步 ...