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. Dynamic proxy

    import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import java.lang.reflec ...

  2. Gradle增量学习建筑

    请在本系列下面的文章下载Github演示示例代码: git clone https://github.com/davenkin/gradle-learning.git       假设我们Gradle ...

  3. SWI-Prolog

    上个月突然看到Prolog这门语言,它特殊的语法吸引了我,但是经过我一段时间的学习,发现它也不像网络上传说的那样神奇,不过我依然对它很感兴趣,有前辈说Prolog本身并不强大,但是用来作为一门辅助语言 ...

  4. 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定

    本章讨论在力学图中经常使用到的事件( Event ),然后对[p=555">进阶 - 第 2.0 章]的人物关系图进行改进.使用户可以固定拖拽的对象. 在[入门 - 第 9.2 章]和 ...

  5. 在线maven仓库

    findmaven.net是一个查找Jar和查找Maven的Maven仓库搜索引擎,它能够依据Java开发人员提供的Class名或者Jar名找到包括它的Jar,同一时候提供Jar的Maven仓库链接, ...

  6. groovy install,gvm,groovysh简述（转）

    1.1 安装Groovy Groovy主页:http://www.groovy-lang.org 确保本地系统安装了Java 1.1.1 在Windows系统上安装Groovy 1.创建环境变量GRO ...

  7. E - Speed Limit(2.1.1)

    E - Speed Limit(2.1.1) Time Limit:1000MS     Memory Limit:30000KB     64bit IO Format:%I64d & %I ...

  8. poj2431 Expedition

    直接代码... #include<string.h> #include<stdio.h> #include<queue> #include<iostream& ...

  9. linux下一个eclipse组态jdk

    今天ubuntu12.04安装eclipse,安装该想法eclipse后.还需要配置jdk.但没想到eclipse我有自己主动做好(但最主要的原因是我的linux在刚刚安装了一个jdk,假设有两个或更 ...

  10. string.Format对C#字符串格式化

    String.Format 方法的几种定义: String.Format (String, Object) 将指定的 String 中的格式项替换为指定的 Object 实例的值的文本等效项.Stri ...