zoukankan      html  css  js  c++  java
  • 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低版本下测试!

  • 相关阅读:
    springMVC+freemarker中Could not resolve view with name... 问题解决
    mybatis中if test 语句 当参数类型为string时,如何写判断条件
    博科交换机升级FOS系统
    response.redirect 和Server.Transfer 的区别
    win7 安装MyGeneration版本,没有安装mdac的解决办法
    Zen Cart的sidebox机制
    ASPCMS相册 实现每张图片对应一段文字
    ZEN CART 系统想在首页调用 新闻插件 的 新闻列表的方法
    JS获得来源页
    zen cart去掉zenid的简单方法
  • 原文地址:https://www.cnblogs.com/shizhouyu/p/4753887.html
Copyright © 2011-2022 走看看