IE8 фокус псевдо-класс и Sibling Selector - PullRequest
Новая
       35

IE8 фокус псевдо-класс и Sibling Selector

3 голосов
/ 18 ноября 2009

У меня есть некоторая разметка, и я пытаюсь, чтобы «подсказки для некоторого ввода» загорелись, когда выделенный текстовый ввод имеет фокус. Я пытаюсь использовать псевдокласс focus вместе с селектором родного брата. Если я просто использую один или другой, он работает просто отлично. Однако при объединении их в IE8 появляется, как если бы этот стиль не обновлялся при переходе по текстовым полям. ПРИМЕЧАНИЕ: если вы щелкнете по текстовому полю и вернетесь назад, их стиль обновится.

Вот разметка: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        html { font-family: Arial; }
        .lineItem {padding:5px; clear:both; }
        .label { display:block; font-size:large; color: #2C2F36; font-weight:bold; padding:5px 0px 3px 0px; }
        .textbox:focus { background-color: #FFFFBF; }       
        .textbox { font-size: large; color: #2C2F36; width:300px; background-color: #FFFFE8; padding:3px 5px; border:solid 2px #cecece; float:left; }
        .hint {  margin-left:10px; width:175px; font-size:smaller; display:block; float:left; color: #466E62; }
        .textbox:focus+.hint {color: Red; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="lineItem">
            <label for="ListName" class="label">List Name</label>
            <input id="Name" name="ListName" type="text" class="textbox" />
            <span class="hint" id="NameHint">This is the title of your List.</span>
        </div>
        <div class="lineItem">
            <label for="ListSlug" class="label">http://List/Username/</label>
            <input id="Slug" name="ListSlug" type="text" class="textbox" />
            <span class="hint" id="SlugHint">The URL that you will use to share your list with others.</span>
        </div>
    </div>
    </form>
</body>
</html>

Вот скриншот того, что я вижу:

Снимок экрана http://www.osbornm.com/pics/IE8Issue.png

ПРИМЕЧАНИЕ. Работает в других браузерах :( и других псевдоклассах, таких как hover work

Ответы [ 2 ]

7 голосов
/ 20 ноября 2009

Согласно http://www.quirksmode.org/css/contents.html Селекторы смежных братьев и сестер не корректно поддерживаются браузерами IE, и, боюсь, должен сказать - извините, вы не можете достичь того, что вы хотите, используя Только CSS .

Но вы можете использовать jQuery, и вот как вы можете это сделать: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        html { font-family: Arial; }
        .lineItem {padding:5px; clear:both; }
        .label { display:block; font-size:large; color: #2C2F36; font-weight:bold; padding:5px 0px 3px 0px; }
        /* .textbox:focus { background-color: #FFFFBF; } */
        .textbox { font-size: large; color: #2C2F36; width:300px; background-color: #FFFFE8; padding:3px 5px; border:solid 2px #cecece; float:left; }
        .hint {  margin-left:10px; width:175px; font-size:smaller; display:block; float:left; color: #466E62; }
        /* .textbox:focus + .hint {color: Red; } */
        .hintOn { color:Red; }
        .textboxOn { background-color: #FFFFBF; }
    </style>
    <script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        var Hints = {
            Swap: function(obj) {
                $(obj).parent().find('.hint').toggleClass("hintOn");
                $(obj).toggleClass("textboxOn");
            },
            Init: function() {
                $(function() {
                    $('.textbox').focus(function() {
                        Hints.Swap(this);
                    }).blur(function() {
                        Hints.Swap(this);
                    });
                });
            }
        };
        Hints.Init();
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="lineItem">
                <label for="ListName" class="label">List Name</label>
                <input id="Name" name="ListName" type="text" class="textbox" />
                <span class="hint" id="NameHint">This is the title of your List.</span>
        </div>
        <div class="lineItem">
                <label for="ListSlug" class="label">http://List/Username/</label>
                <input id="Slug" name="ListSlug" type="text" class="textbox" />
                <span class="hint" id="SlugHint">The URL that you will use to share your list with others.</span>
        </div>
    </div>
    </form>
</body>
</html>

В свое решение я включил ссылку на jQuery, размещенную в Microsoft, и написал простой метод применения необходимых стилей. Вы можете легко изменить «подсвеченное» состояние подсказки и поля ввода, внеся изменения в свои классы CSS.

Я протестировал свое решение на IE6, IE7, IE8, Firefox, Opera, Chrome и Safari, и оно работает правильно.

4 голосов
/ 26 ноября 2009

I провел некоторые исследования и провел несколько тестов. Казалось, проблема в том, что IE8 не будет обновлять статус, если элемент не будет специально размыт до того, как следующий элемент получит фокус. Я протестировал целевое исправление IE8, но для этого нужен javascript. Это зависит от вас, если компромисс стоит того:

CSS: 

/* Add a 'normal' selector for IE8, leave sibling selector for other browsers */
.lineItem.focus .hint, 
.textbox:focus + .hint {color: Red;}

JS : 

<!--[if IE 8]>
<script type="text/javascript" charset="utf-8">
    var els = document.getElementsByTagName('input');
    for(var i = 0; i < els.length; i++){
        var el = els[i];
        if(!/textbox/.test(el.className)) continue;
        el.attachEvent('onblur', function(){
            event.srcElement.parentNode.className = event.srcElement.parentNode.className.replace(' focus','');
        });
        el.attachEvent('onfocus', function(){
            event.srcElement.parentNode.className += ' focus';
        });
    };
</script>
<![endif]-->

Вставьте этот скрипт перед закрывающим тегом тела или после последнего элемента input.textbox. Он будет просматривать теги, будут обрабатываться только те, которые содержат класс textbox. Он просто добавляет класс к родительскому элементу и удаляет класс, когда элемент input размыт. Используя стандартный родительский / дочерний селектор, мы заставляем IE8 делать то, что нужно.

...