Форум

Suharik · #1 (**permalink**) 29.11.2011, 18:30

Всем привет. есть код

$(function () {
        $('.tip').each(function () {
            var trigger = $(this);
            var info = $('.popup');
            $(trigger).focus(function () {
                    var width = trigger.offset();
                    info.css({
                        top: width.top+30,
                        left: width.left,
                        display: 'block'
                    });
            }).blur(function () {
                    info.css({
                        display: 'none'
                    });
            });
        });
    });

<head>
  <style type="text/css" media="screen"> 
    <!--
        .popup {
        	position: absolute;
        	display: none;
        	z-index: 50;
        	border-collapse: collapse;
        }
    -->
    </style> 
</head>
<body> 
                  <input type='text' name='dfd' class="tip">
                  <input type='text' name='dfd' class="tip">
                  <input type='text' name='dfd' class="tip">
                  <input type='text' name='dfd' class="tip">
   
          <div id="dpop" class="popup"> sdfdsfdfgdfgdfgdfgfsdvbcxvzxcv</div>
</body>

При нажатии на инпут, показывается див чуть ниже того инпута на который нажал.
Как сделать чтобы при нажатии на этот див, который открылся, он не проподал, чтобы фокус на инпуте оставался. А если тыкнуть в другое место то фокус должен пропасть.
Сори в теме откудато взялось слово "Перезагрузить страницу " ))

Suharik · #2 (**permalink**) 30.11.2011, 10:11

Моя истинная задумка это сделать ввод чисел в инпут мышкой посредствам открывающихся картинок (чиел в диве)
Тыкнул на инпут, выскачил рядом с этим инпутом див. внутри дива циферки как на калькуляторе. тыкаю на числа и они добавляются в тот инпут на который изначально нажали.
Если кто делал такое, помогите плиз кодом

Pavel M. · #3 (**permalink**) 30.11.2011, 10:39

Сообщение от Suharik

Тыкнул на инпут, выскачил рядом с этим инпутом див. внутри дива циферки как на калькуляторе. тыкаю на числа и они добавляются в тот инпут на который изначально нажали.
Если кто делал такое, помогите плиз кодом

что-то подобное ниже

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
<script>
	$(function(){
		var inp = $('input');
		inp.focus(function () {
			$('div').show();
		});
		$('button').click(function () {
			inp.val(inp.val() + $(this).text());
		});
	});
</script>
</head>
<body>
	<input type="text">
	<div style="display: none">
		<button>1</button>
		<button>2</button>
		<button>3</button>
	</div>
</body>
</html>

Suharik · #4 (**permalink**) 30.11.2011, 11:37

Pavel M.,
Супер. Только при клике на другое место (пустое или еще куда-то) Див с цифрами должен проподать.

Pavel M. · #5 (**permalink**) 30.11.2011, 12:23

Сообщение от Suharik

Только при клике на другое место (пустое или еще куда-то) Див с цифрами должен проподать.

добавьте еще один обработчик на body или другой элемент и обрабатывайте там откуда пришел клик, например

$(document.body).click(function (e) {
   if($(e.target).is('body')){
         $('div').hide();
   }
});

если кликнули на body, то скрывайте нужный элемент

Suharik · #6 (**permalink**) 16.12.2011, 16:04

Pavel M.,
Сделал почти так как сказал. Все получилось))
Если интересно скину ссылку на саму реализацию

Форум

Справочник

Discord чат

Курсы javascript