Форум

Verbal · #1 (**permalink**) 17.07.2014, 11:08

Я знаю как узнать просто где находится фокус document.activeElement
А как реализовать что есть неограниченное число инпутов, с различными id. И при клике на любой инпут например нужно вывести
alert('inputid=9');
или
alert('inputid=10');
т.е. 9 и 10 это id inputa соответственно.

skrudjmakdak · #2 (**permalink**) 17.07.2014, 11:38

<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>

skrudjmakdak · #3 (**permalink**) 17.07.2014, 11:40

с 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>

krasovsky · #4 (**permalink**) 17.07.2014, 11:40

$(document).click(function(e){
    if(e.target.tagName == 'INPUT') {...}
})

skrudjmakdak · #5 (**permalink**) 17.07.2014, 11:46

krasovsky,
а нафига всем элементам присваивать события? имхо, не рационально

рони · #6 (**permalink**) 17.07.2014, 12:00

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

а нафига всем элементам присваивать события?

и где?

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

$(document).click

один элемент и конечно тот который содержит все input

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

$('input[type=text]').click

куча элементов а нафига всем элементам присваивать события

$(document).on('click', 'input', function(e){alert(this.id)})

WorM32 · #7 (**permalink**) 17.07.2014, 12:04

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

правда, если юзать jQuery, то я бы сделал так

$(document).on('click', 'input', function () {
    alert($(this).attr('id'));    
});

skrudjmakdak · #8 (**permalink**) 17.07.2014, 12:24

а если надо будет навешать 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>

рони · #9 (**permalink**) 17.07.2014, 12:36

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

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

или надо сразу 2 события отработать:

skrudjmakdak · #10 (**permalink**) 17.07.2014, 12:40

не много не верно выразился, можно было додуматься:

<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>

Форум

Справочник

Discord чат

Курсы javascript