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 5045 费用流

    滚动建图,最大费用流(每次仅仅有就10个点的二分图).复杂度,m/n*(n^2)(n<=10),今年网络赛唯一网络流题,被队友状压DP秒了....难道网络流要逐渐退出历史舞台???.... #i ...

  2. 记录我第一次在Android开发图像处理算法的经历

    大概是四月底的时候.有人加我QQ问我是否做能做一些基于图像皮肤检測的算法, 主要是实现对皮肤六项指标: 1.      水分 2.      有份 3.      痤疮与痘痘 4.      色斑与肤 ...

  3. 怎样批量把excel中已显示的科学计数法取消

    作者:iamlaosong 把一文本文档拷贝到EXCEL中时,当中一列数字所有变成科学计数法,这些数事实上是条码号,不需进行运算,怎样能够取消科学计算法,将数字显示成原来的样子呢?一般方法例如以下: ...

  4. STL 源代码分析 算法 stl_heap.h

    本文senlie原版的.转载请保留此地址:http://blog.csdn.net/zhengsenlie heap ----------------------------------------- ...

  5. 《Javascript权威指南》十六学习笔记：BOM资源---BOM基本应用

    BOM基本应用包括:管理浏览器历史记录.得到处理和解决浏览器的信息.本文介绍了这些应用程序. 一.浏览历史管理 1.history对象的方法和属性 History 对象包括用户(在浏览器窗体中)訪问过 ...

  6. .Net中把图片等文件放入DLL中，并在程序中引用

    原文:.Net中把图片等文件放入DLL中,并在程序中引用 [摘要] 有时我们需要隐藏程序中的一些资源,比如游戏,过关后才能看到图片,那么图片就必须隐藏起来,否则不用玩这个游戏就可以看到你的图片了,呵呵 ...

  7. AspNetPager使用指南

    一.AspNetPager支持两种方式分页: 一种是PostBack方式分页, 一种是通过Url来实现分页以及Url重写功能 二.AspNetPager支持各种数据绑定控件GridView.DataG ...

  8. hdu 逆袭指数

    Problem Description   这依然是关于高富帅小明曾经的故事—— 尽管身处逆境,但小明一直没有放弃努力,除了搬砖,小明还研究过东方的八卦以及西方的星座,一直试图在命理上找到自己能够逆袭 ...

  9. django中通过model名字获取model

    django1.6, 通过字符串和get_app.get_model获得对应的object 只需要两行代码: from django.db.models import get_model get_mo ...

  10. javascript权威指南(2)

    JavaScript预定义了一系列全局变量和函数,在自定义变量和函数式要避免使用这些预定义的名称: arguments encodeURI  Infinity  Number  RegExp Arra ...