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. java 它 引用（基本类型的包装，构造函数和析构函数c++不同）

      一个:java 和c++参考控制 他提到引用,我们会想到java它不喜欢c++里面的指针.当然java内引用和c++里面的引用是不同的. 比如: 比方C++中,我对某一个函数的声明.int a(i ...

  2. Sizzle.selectors.relative [ 源代码分析 ]

    1 jQuery 对象Sizzle.selectors.relative中存放了块间关系符和相应的块间关系过滤函数,称为"块间关系过滤函数集" 块间关系符共同拥有4种,其含义和过滤 ...

  3. CentOS7 安装Hbase集群

    继续接上一章,已安装好Hadoop集群环境 http://www.cnblogs.com/dopeter/p/4612232.html 在此基础上继续安装Hbase集群 Hbase版本为1.0.1.1 ...

  4. Web 服务器 (IIS) 角色

    原文:Web 服务器 (IIS) 角色 1. 对于默认安装,请在命令行提示符下键入以下命令,然后按 Enter: start /w pkgmgr /iu:IIS-WebServerRole;WAS-W ...

  5. 关于继承modelDriven接口action的ajax来电参数

    例如   Model类如下面,Teacher,public class Teacher{  private Integer id. priavte  String name;  private Sch ...

  6. Android AIDL使用特定的解释

    1.什么是aidl:aidl这是 Android Interface definition language缩写,认清,这是android进程间通信接口的叙事语言描述.通过它我们可以定义进程间通信接口 ...

  7. Git合并多个Commit

    当前有四个commit,现在要将四个commit合并为一个,可以使用git rebase -i HEAD~{这里是要合并的commit数量} 如 git rebase -i HEAD~4 ,即为合并最 ...

  8. DirectX 9 UI三种设计学习笔记：文章4章Introducing DirectInput+文章5章Wrapping Direct3D

           本文从哈利_创.转载请注明出处.有问题欢迎联系本人!        邮箱:2024958085@qq.com 上一期的地址: DX 9 UI设计学习笔记之二 第4章 Introducin ...

  9. 求和问题(DFS)

    输入: n=4 a={1,2,4,7} k=13 输出: YES 输入: n=4 a={1,2,4,7} k=13 输出: NO 选出若干数,使它们的和恰好为k #include <stdio. ...

  10. 物理引擎Havok教程(一)搭建开发环境

    物理引擎Havok教程(一)搭建开发环境 网上关于Havok的教程实在不多,并且Havok学习起来还是有一定难度的,所以这里写了一个系列教程,希望可以帮到读者.这是第一期. 一.Havok物理引擎简单 ...