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

  • 相关阅读:
    访存模型
    Petri网
    Forward secrecy
    TensorFlow训练神经网络cost一直为0
    解决tensorflow在训练的时候权重是nan问题
    tf.argmax
    Keras教程
    z-score
    隐马尔可夫(HMM)、前/后向算法、Viterbi算法
    受限玻尔兹曼机基础教程
  • 原文地址:https://www.cnblogs.com/shizhouyu/p/4753887.html
Copyright © 2011-2022 走看看