Question

我有一个下拉列表，当您浏览项目时，光标会变为其后面的对象。我在网上看了一下，发现这是IE订单的唯一问题。我尝试在选项后面使用跨度块来欺骗我在另一个表单上找到但却没有运气。有什么建议？

razor vbhtml

<div class="col-110px" id="ItemContainer">
    <label class="select-label" for="Item">Item</label>
    <span>@Html.DropDownListFor(Function(m) m.Item, CType(Model.ItemList, IEnumerable(Of SelectListItem)), New With {.class = ""})</span><span></span>
</div>
span {
    position:relative;
    z-index:0;
}
span span {
    display:none;
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:rgba(255, 0, 0, .25);
    z-index:-1;
}
span select:focus + span {
    display:block;
}

Answer 1

我打算稍早发布，但我终于让它工作了......大部分时间。如果有人有更好的建议请告诉我

将来我想要清理它以检查是否存在滚动条并且更灵活

在您的JS文件中

添加以下内容

function IEDropdownSpan() {
    //Add span behind drop downs to prevent cursor from changing. IE only
    //only run if IE or Edge 20+ as it will break in all other browsers
    var isIE = false || !!document.documentMode;
    var isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {
        $("select").each(function () {
            var $curSelect = $(this);
            var $parent = $curSelect.parent();
            var oldOverflowValue = "";

            //This if statement is due to several types of drop downs that do not fit the normal profile
            if (!($curSelect.parent('span').hasClass('iedropdownspan')) && !$curSelect.is('[class^=chosen]') && !$parent.parent().is('[class^=modal-content]')) {

                if ($curSelect.parent('span').length === 0) {
                    $curSelect.wrapAll("<span></span>");
                    $parent = $curSelect.parent();
                }

                if ($curSelect.next("<span></span>".length === 0)) {
                    $("<span></span>").insertAfter($curSelect);
                }

                $curSelect.focus(function () {

                    //You can add any conditions here. I had to remove the rest due to company privacy. But this is the level that the overflow has to be hidden on
                    if ($parent.closest("article .content")) {
                        oldOverflowValue = $parent.closest('article .content').css('overflow-y');
                        $parent.closest('article .content').css('overflow-y', 'hidden');
                    }

                    if (!$curSelect.parent('span').hasClass('iedropdownspan')) {
                        $parent.addClass('iedropdownspan');
                    }

                });
                $curSelect.blur(function () {
                    if ($parent.closest("article .content")) {
                        $('article .content').css('overflow-y', oldOverflowValue);
                    }

                    $parent.removeClass('iedropdownspan');
                    oldOverflowValue = "";
                });

            }


        });
    }
}

IE光标在下拉列表中更改

1 个答案: