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. 博客搬到了http://xianglong.me

    自己用Django建立个人博客.这个博客的部分已经迁移到新的个人博客. 博客地址:龙 (http://xianglong.me),欢迎. 版权声明:本文博客原创文章,博客,未经同意,不得转载.

  2. 终结者:具体解释Nginx(一)

            相信非常多人都听过Nginx.这个小巧的东西能够和Apache及IIS相媲美. 那么它有什么作用呢?一句话.它是一个减轻Web应用server(如Tomcat)压力和实现Web应用se ...

  3. 获得span里面价值（在特殊情况下 ）

    如何获得A? <div class="warpper"> <span class="content"> A <span>12 ...

  4. Building Redis for use on Cygwin（转）

    This is the second time I have installed Redis for use on Cygwin in the last several months. It seem ...

  5. Round #169 (Div. 2)D. Little Girl and Maximum XOR

    1.首先是要找到一个位置从左至右,作l这一个是0,r这一个是1. 2.实例01011,10100.你将能够找到01111和10000. #include<cstdio> #include& ...

  6. 【Hibernate步步为营】--复合主键映射具体解释

    上篇文章讨论了继承映射,它是对象模型中最主要的特性,对于继承映射它的主要区分是字段类型的不同,所以在生成表结构时须要有新列来标识数据的类型,能够使用<subclass>标签并在标签中加入d ...

  7. Mule ESB-Content-Based Routing Tutorial（2）

    承接 Mule ESB-Content-Based Routing Tutorial(1) 五.执行应用程序  完毕创建,配置.并保存你的新的应用程序,您就能够在嵌入Mule的server上执行(包含 ...

  8. Java 反射 想

    所谓反射.是指在执行时状态中,获取类中的属性和方法.以及调用当中的方法的一种机制. 这样的机制的作用在于获取执行时才知道的类(Class)及当中的属性(Field).方法(Method)以及调用当中的 ...

  9. Codeforces Round #235 (Div. 2) D. Roman and Numbers(如压力dp)

    Roman and Numbers time limit per test 4 seconds memory limit per test 512 megabytes input standard i ...

  10. java学习笔记2——Eclipse的安装及汉化图解

    Eclipse的安装 有了JDK,你可以编译Java源码,运行Java程序,但是还没有代码编辑器,没有版本管理工具,也不能方便的管理工程文件,不能与团队协作.安装Eclipse,你才能完成这些工作. ...