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

    使用方式:


      

  • 相关阅读:
    第二十天笔记
    第十九天笔记
    第十七天笔记
    第十五天笔记
    第十六天笔记
    第十二天笔记
    数字三角形
    最大子段和与最大子矩阵和
    分组背包
    二维背包
  • 原文地址:https://www.cnblogs.com/wangxinyubokeyuan/p/14108837.html
Copyright © 2011-2022 走看看