Изменения стиля OnFocus и OnBlur работают в Fire Fox, но не в IE - PullRequest
Новая
       4

Изменения стиля OnFocus и OnBlur работают в Fire Fox, но не в IE

1 голос
/ 22 июня 2010

Привет всем, у меня есть следующие стили в моем CSS: 

.on_focus {
    background-color:yellow;
}
.off_focus {
    background-color:white;
}

Тогда у меня есть этот ввод в моей форме: 

            <label>Last Name</label><br/>
            <input id="l_name" class="text" type="text" name="l_name" maxlength="20" onfocus="this.className='on_focus'" onblur="this.className='off_focus'"/><br/><br/>

Это прекрасно работает в Fire Fox, но совсем не работает в IE. В IE цвет фона никогда не меняется, он всегда белый независимо от того, имеет фокус поле или нет. Что здесь за дело?

1 Ответ

1 голос
/ 22 июня 2010

Это не единственный вариант, но вы можете сделать это только с помощью CSS.

Ваш CSS: 

input[type="text"]:focus {background-color:Yellow;}
input[type="text"]:blur {background-color:White;}

Ваш HTML: 

<label for="l_name">Last Name</label>
<input type="text" id="l_name" />

Iдобавлен селектор атрибута для type = text, так что он будет работать только с этими типами входных тегов.

- EDIT -

Что касается IE, выше будет толькоработать на IE8.Итак, для решения JavaScript попробуйте это возможно? 

<script type="text/javascript">
    function onFocus(element) {
        //element.style.backgroundColor = "Yellow";
        element.className = "on_focus";
    }
    function onBlur(element) {
        //element.style.backgroundColor = "White";
        element.className = "off_focus";
    }
</script>

Ваш HTML: 

<label for="l_name">Last Name</label> 
<input type="text" id="l_name" onfocus="onFocus(this);" onblur="onBlur(this);" />
...