zoukankan      html  css  js  c++  java
  • 兼容ie9的placeholder(vue自定义指令)

    const supportIE = {
    install:function (Vue) {
    Vue.directive('support', {
    inserted: function (el) {
    if (('placeholder' in document.createElement('input'))) {
    return;
    }
    if (/^el/.test(el.className)) {
    el = el.querySelector('[placeholder]');
    }
    let placeholder = el.getAttribute('placeholder') || '请输入';
    let span = document.createElement('span');
    span.className = 'ie-placeholder';
    span.innerText = placeholder;
    span.style.left = el.offsetLeft + 25 + 'px';
    // el.parentNode.style.position = 'relative'
    el.insertAdjacentElement('afterend', span);
    span.onclick = function (event) {
    el.focus();
    }
    el.onfocus = function (event) {
    if (event.target.value) {
    span.style.display = 'none';
    }
    };
    el.onblur = function (event) {
    if (!event.target.value) {
    span.style.display = 'inline';
    }
    };
    el.oninput = function (event) {
    if (event.target.value) {
    span.style.display = 'none';
    } else {
    span.style.display = 'inline';
    }
    }
    },
    unbind: function (el) {
    el.onfocus = el.onblur = el.oninput = null;
    }
    })
    }
    }

    export default supportIE

    使用方式:


      

  • 相关阅读:
    枚举类 --单例模式
    模板设计模式
    动态代理
    反射应用--修改属性值
    通过反射绕过泛型
    java反射
    网络编程练习
    TCP编程
    GUI 聊天界面
    UDP传输多线程
  • 原文地址:https://www.cnblogs.com/wangxinyubokeyuan/p/14108837.html
Copyright © 2011-2022 走看看