3

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

但是，Chrome 和 IE10 本身就支持这种行为，所以我不想在这些浏览器中应用插件。

我找到了 IE10 的方法。将样式元素注入 DOM，隐藏伪元素“::-ms-clear”（即 IE 插入文本输入的 x），然后检查某个输入中的伪元素是否具有“显示：无”。

Chrome 还添加了一个伪元素：“-webkit-search-cancel-button”，我也可以使用 CSS 隐藏它，但是我无法确定它是否隐藏，使用getComputedStyle，因为 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);

})()
4

0 回答 0