Question

我写了一个插件，它模仿了Chrome搜索输入字段的行为。（有一个X，它清除输入）。

但是，Chrome和IE10本身支持此类行为，因此我不想在这些浏览器中应用该插件。

我为IE10找到了一种方法。将一个样式元素注入DOM中，隐藏伪元素“:: - ms-clear”（即IE插入文本输入的x），然后检查特定输入中的伪元素是否为“display：none”。

Chrome还添加了一个伪元素：“ - webkit-search-cancel-button”，我也能用CSS隐藏它，但是我无法确定它是否隐藏，使用{{3因为Chrome总是返回输入本身的结果，而不是伪元素。在此先感谢：）

(function () {

    function hasNativeClearButton(input) {
        var inputCopy = input.cloneNode(),
            head = document.getElementsByTagName('head')[0],
            style = document.createElement('style'),
            css = '.cc-clearinput-already-supported-test { position: absolute;display: block; } .cc-clearinput-already-supported-test::-ms-clear { display: none; } .cc-clearinput-already-supported-test::clear { display: none; } .cc-clearinput-already-supported-test::-webkit-search-cancel-button { display: none; }';


        style.textContent = css;
        head.insertBefore(style, null);

        inputCopy.className = 'cc-clearinput-already-supported-test';
        inputCopy.value = 'aValue';
        document.body.insertBefore(inputCopy, null);


        alert(window.getComputedStyle(inputCopy, '::-ms-clear').display);
        alert(window.getComputedStyle(inputCopy, '::-webkit-search-cancel-button').display);

        head.removeChild(style);
        document.body.removeChild(inputCopy);

    }

    var daInput = document.createElement('input');
    daInput.type = 'search';
    hasNativeClearButton(daInput);

})()

检测Chrome（和IE10）中的输入类型搜索清除按钮

0 个答案: