• placehoder兼容


    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://js.40017.cn/cn/min/??/cn/public/fish.1.4.5.js,/cn/public/fc.1.1.6.js?v=082102" type="text/javascript"></script>

    </head>
    <body>
    <!--<input class="gd_code gdCodeVer" type="text" vtype="rq" vfn="njCodeFn" data-err-rq="专属码不可为空" data-err-fn="请填写正确的专属码" placeholder="请输入您的南京银行专属码"/>-->
    <input type="text" id="zy" zy="请输入您的南京银行专属码"/>
    </body>
    <script>

    // fish.admin.config({
    // verify: { v: "0.4.1", css: 1, g: 2013011701 }
    // });
    // function njCodeFn(val,elem){
    //
    // var newRex = /^[0-9a-zA-Z]{8}$/,
    // pass = newRex.test(val);
    // if(pass){
    // return true;
    // }
    // else{
    // return false;
    // }
    // }

    function isPlaceholder(){
    var input= document.createElement('input');
    return 'placeholder' in input;
    }

    function Placeholder(obj){
    this.input = obj;
    this.label =document.createElement('label');
    this.label.innerHTML = obj.getAttribute('zy');
    this.label.style.cssText = 'position:absolute;text-indent:4px;color:#999;font-size:14px;'
    if(obj.value!=''){
    this.label.style.display='none';
    }
    this.init();

    }

    Placeholder.prototype = {
    getxy:function(obj){
    var left,top;
    if(document.documentElement.getBoundingClientRect){
    var html=document.documentElement,
    body=document.body,
    pos=obj.getBoundingClientRect(),
    st=html.scrollTop || body.scrollTop,
    sl=html.scrollLeft || body.scrollLeft,
    ct=html.clientTop ||body.clientTop,
    cl=html.clientLeft || body.clientLeft;
    left = pos.left + sl -cl;
    top = pos.top + st -ct;
    }else{
    while(obj){
    left += obj.offsetLeft;
    top += obj.offsetTop;
    obj = obj.offsetParent;
    }
    }
    return{ left: left, top :top}

    },
    getwh: function(obj){
    return {
    w:obj.offsetWidth,
    h:obj.offsetHeight
    }
    },
    setStyles:function(obj,styles){
    for(var p in styles){
    obj.style[p]=styles[p]+'px';
    }
    },
    init:function(){
    var label=this.label,
    input=this.input,
    getXY =this.getxy,
    xy=this.getxy(input),
    wh=this.getwh(input);
    this.setStyles(label,{'width':wh.w,'height':wh.h,'lineHeight':40,'left':xy.left+8,'top':xy.top});
    document.body.appendChild(label);
    label.onclick = function(){

    this.style.display = 'none';

    input.focus();

    }

    input.onfocus = function(){

    label.style.display = 'none';

    };

    input.onblur = function(){

    if(this.value == ''){

    label.style.display = 'block';

    }

    };

    if(window.attachEvent){
    window.attachEvent("onresize",function(){
    var xy=getXY(input);
    Placeholder.prototype.setStyles(label,{'left':xy.left+8,'top':xy.top});
    })
    }else{
    window.addEventListener("resize",function(){
    var xy=getXY(input);
    Placeholder.prototype.setStyles(label,{'left':xy.left+8,'top':xy.top});
    },false);
    }




    }


    }

    new Placeholder(document.getElementById('zy'));






    </script>
    </html>

    function inputIeplaceholder(objInput,focusC,blurC){
    var doc = document,
    inputs = doc.getElementById(objInput),
    //inputs = doc.getElementsByClassName(objInput),
    supportPlaceholder = 'placeholder' in doc.createElement('input'),
    placeholder = function(input) {
    var text = input.getAttribute('placeholder'),
    defaultValue = input.defaultValue;
    if (defaultValue == '') {
    input.value = text;
    input.style.color = '#'+blurC;
    }
    input.onfocus = function() {
    if (input.value === text) {
    this.value = '';
    this.style.color = '#'+focusC;
    }
    };
    input.onblur = function() {
    if (input.value === '') {
    this.value = text;
    this.style.color = '#'+blurC;
    }
    }
    };
    if (!supportPlaceholder) {

    var text = inputs.getAttribute('placeholder');
    if (text) {
    placeholder(inputs);
    }
    }
    }


  • 相关阅读:
    VS2019删除大量空白行或者缩进大量空白行
    VS219 没有.net core 3.0模板
    Win10怎么添加开机启动项?Win10添加开机自动运行软件三种方法
    Unity 屏幕坐标到UGUI RectTransform本地坐标的转换
    MySQL 常用帮助信息
    CentOS 7 系统初始化
    JDK 安装部署
    centos7 yum install redis
    Redis5.0.3单机版安装
    shell 脚本检测端口状态
  • 原文地址:https://www.cnblogs.com/serene92/p/4491853.html
Copyright © 2020-2023  润新知