Всем привет.

Сегодня у меня для вас очередное решение «проблемы века»))
В одном из проектов я столкнулся с проблемой: на странице был инпут и если поставить в него курсор, чтобы он был активным, а потом навести мышь на меню, чтобы появился выпадающий блок, то через него был виден курсор мигающий в инпуте.
Баг был только в эксплорере и обуславливался тем, что инпут был расположен в коде ниже, чем меню и выпадающие блоки, поэтому z-index не срабатывал.
Немного подумав я написал небольшой js скрипт который и решил эту проблему.

<!--[if IE]>
	<script type="text/javascript">
	//fix IE bug - курсор в инпуте просвечивает через верхнее меню
		$(document).ready(function(){
			//переменная с нужным инпутом
			var focused = $("input:focus").attr('id');
			//при наведении курсора на меню убираем курсор из инпута
			$('.menu div').hover(function(){
				$('input').blur();
			},
			function(){		//а при отведении возвращаем инпуту фокус
				$('#'+focused).focus();
			});
		});
	</script>
<![endif]-->

Пример написан с использование jQuery, но его без проблем можно переделать на чистый js.
Код работает только в IE и не нагружаеет адекватные браузеры благодаря условным комментариям.

Надеюсь, что помог вам.

Фиксим баг IE курсор в инпуте просвечивает через выпадающий блок
Метки:         

Один комментарий к “Фиксим баг IE курсор в инпуте просвечивает через выпадающий блок

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

90% сайтов рунета содержат уязвимости и могут быть взломаны! Проверь свой сайт!