IE7 ввод: фокус

Question

У меня есть следующий CSS, который не работает в IE7.

input:focus{border-width: 2px;border-color: Blue; border-style: solid;}

По сути, я просто хочу установить атрибуты границы, когда ввод сфокусирован. Работает в Firefox и т. Д. Если кто-то может объяснить, почему он не работает в IE 7, и предложить возможный обходной путь, это будет оценено. Спасибо.

Answer 1

Я понимаю желание не добавлять события, но в этом случае похоже, что MSIE7 дергается в этом вопросе и его нужно взломать. В своем комментарии к @ Ape-inago вы указываете, что используете jQuery. Вот решение в jQuery. Я проверил это в MSIE 6 и 7, и он, кажется, делает то, что вы хотите.

<script type="text/javascript">
$(document).ready(function(){
    if (jQuery.browser.msie === true) {
        jQuery('input')
            .bind('focus', function() {
                $(this).addClass('ieFocusHack');
            }).bind('blur', function() {
                $(this).removeClass('ieFocusHack');
            });
    }

});
</script>
<style>
input:focus, input.ieFocusHack
{
    border-width: 2px;
    border-color: Blue;
    border-style: solid;
}
</style>

Answer 2

Известный ответ для этой проблемы - использовать следующий код:

    sfFocus = function() {
    var sfEls = document.getElementsByTagName("INPUT");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onfocus=function() {
            this.className+=" sffocus";
        }
        sfEls[i].onblur=function() {
            this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
        }
    }}
if (window.attachEvent) window.attachEvent("onload", sfFocus);

А вот и стиль CSS

input:focus, input.sffocus{background-color:#DEEFFF;}

Проблема в том, что IE вообще не распознает этот стиль.

РЕДАКТИРОВАТЬ: Вы можете найти решение, используя прототип здесь: http://codesnippets.joyent.com/posts/show/1837

Answer 3

Если вы используете jQuery 1.7+, вы обнаружите, что использование «Live» больше не рекомендуется, новая альтернатива - «.on», поэтому код, который #DotNetWise использовал выше, будет выглядеть так:

$.browser.msie && $.browser.version < 8 && $("input,select,textarea").on({
    focus: function(){
        $(this).removeClass("blur").addClass("focus");
    },
    blur: function(){
        $(this).removeClass("focus").addClass("blur");
    }
});

Answer 4

В этом случае лучше обратиться за помощью к javascript

Answer 5

JQuery более простое и приятное решение, которое работает для каждого входа, даже для динамически подключаемых позже:

 $.browser.msie && $.browser.version < 8 && $("input,select,textarea").live("focus", function(){
   $(this).removeClass("blur").addClass("focus"); 
}).live("blur", function() { 
   $(this).removeClass("focus").addClass("blur"); 
});

Пример CSS:

input[type='text']:focus, input[type='text'].focus {
   border: 1px solid red;
}

Answer 6

ПОЧТИ работает

Проблема в том, что когда рассматриваемый элемент имеет фокус, и вы открываете другое окно, а затем возвращаетесь на страницу с соответствующим элементом, он имеет неправильный стиль: (