IE低版本下实现html5的placeholder(表单提示)功能

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低版本下测试！

posted @ 2015-08-24 09:29  史洲宇  阅读(441)  评论(0)  编辑  收藏  举报