Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2014, 10:08
Интересующийся
Отправить личное сообщение для Verbal Посмотреть профиль Найти все сообщения от Verbal
 
Регистрация: 01.08.2013
Сообщений: 25

Узнать на каком элементе сработал фокус
Я знаю как узнать просто где находится фокус document.activeElement
А как реализовать что есть неограниченное число инпутов, с различными id. И при клике на любой инпут например нужно вывести
alert('inputid=9');
или
alert('inputid=10');
т.е. 9 и 10 это id inputa соответственно.
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2014, 10:38
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

<html>
	<head>
		<title>example</title>
	</head>
	<body>
		<input type="text" id="input-1"><br>
		<input type="text" id="input-2"><br>
		<input type="text" id="input-3"><br>
		<input type="text" id="input-4"><br>
		<input type="text" id="input-5"><br>
		<input type="text" id="input-6"><br>
		<script>
var event_click = function ()
	{
	console.log(this.getAttribute('id').split('-')[1]);
	}

Array.prototype.forEach.call(document.querySelectorAll('input[type=text]'), function (ths)
	{
	ths.onclick = event_click;
	});
		</script>
	</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2014, 10:40
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

с jquery будет еще короче:

<html>
	<head>
		<title>example</title>
	</head>
	<body>
		<input type="text" id="input-1"><br>
		<input type="text" id="input-2"><br>
		<input type="text" id="input-3"><br>
		<input type="text" id="input-4"><br>
		<input type="text" id="input-5"><br>
		<input type="text" id="input-6"><br>
		<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<script>
$('input[type=text]').click(function ()
	{
	console.log($(this).attr('id').split('-')[1]);
	});
		</script>
	</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 17.07.2014, 10:40
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

$(document).click(function(e){
    if(e.target.tagName == 'INPUT') {...}
})
Ответить с цитированием
  #5 (permalink)  
Старый 17.07.2014, 10:46
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

krasovsky,
а нафига всем элементам присваивать события? имхо, не рационально
Ответить с цитированием
  #6 (permalink)  
Старый 17.07.2014, 11:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,051

Сообщение от skrudjmakdak
а нафига всем элементам присваивать события?
и где?
Сообщение от krasovsky
$(document).click
один элемент и конечно тот который содержит все input
Сообщение от skrudjmakdak
$('input[type=text]').click
куча элементов а нафига всем элементам присваивать события
$(document).on('click', 'input', function(e){alert(this.id)})

Последний раз редактировалось рони, 17.07.2014 в 11:07.
Ответить с цитированием
  #7 (permalink)  
Старый 17.07.2014, 11:04
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

skrudjmakdak,
как раз таки событие висит только на одном элементе) а твоем примере на всех

правда, если юзать jQuery, то я бы сделал так
$(document).on('click', 'input', function () {
    alert($(this).attr('id'));    
});
Ответить с цитированием
  #8 (permalink)  
Старый 17.07.2014, 11:24
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

а если надо будет навешать 100 событий. это получается в его случае if-ов дохера. или это событие надо будет удалить?

или надо сразу 2 события отработать:
<html>
	<head>
		<title>example</title>
	</head>
	<body>
		<div style="width: 200px; height: 200px; background-color: red;">
			<div style="width: 150px; height: 150px; background-color: yellow;"></div>
		</div>
		<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<script>
$(document).click(function(e)
	{
	console.log(e.target);
	});
		</script>
	</body>
</html>

Последний раз редактировалось skrudjmakdak, 17.07.2014 в 11:26.
Ответить с цитированием
  #9 (permalink)  
Старый 17.07.2014, 11:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,051

Сообщение от skrudjmakdak
а если надо будет навешать 100 событий. это получается в его случае if-ов дохера. или это событие надо будет удалить?

или надо сразу 2 события отработать:
Ответить с цитированием
  #10 (permalink)  
Старый 17.07.2014, 11:40
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

не много не верно выразился, можно было додуматься:
<html>
	<head>
		<title>example</title>
	</head>
	<body>
		<div style="width: 200px; height: 200px; background-color: red;">
			<div style="width: 150px; height: 150px; background-color: yellow;">
				<div style="width: 100px; height: 100px; background-color: green;"></div>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
		<!--<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">-->
		<script>
/*$(document).click(function(e)
	{
	console.log(e.target);
	});*/
$('div').click(function ()
	{
	console.log(this);//сразу 3 клика при клике в верхнему элементу
	});
		</script>
	</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как определить на каком элементе произошло событие hover(или mouseenter)? Boshnik Оффтопик 10 24.03.2014 09:04
dragganable - узнать на каком div опустил элемент romazabelin Элементы интерфейса 2 12.08.2013 21:30
Как сохранить фокус на элементе? SkaN jQuery 11 31.08.2012 17:31
В каком Input фокус? Почемучкин Элементы интерфейса 10 08.12.2011 14:56
Как узнать в каком регистре напечатан русский символ на яваскрипте IGAHDF Я не знаю javascript 2 28.05.2009 18:50