Узнать на каком элементе сработал фокус
Я знаю как узнать просто где находится фокус document.activeElement
А как реализовать что есть неограниченное число инпутов, с различными id. И при клике на любой инпут например нужно вывести alert('inputid=9'); или alert('inputid=10'); т.е. 9 и 10 это id inputa соответственно. |
<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>
|
с 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>
|
$(document).click(function(e){
if(e.target.tagName == 'INPUT') {...}
})
|
krasovsky,
а нафига всем элементам присваивать события? имхо, не рационально |
Цитата:
Цитата:
Цитата:
$(document).on('click', 'input', function(e){alert(this.id)})
|
skrudjmakdak,
как раз таки событие висит только на одном элементе) а твоем примере на всех правда, если юзать jQuery, то я бы сделал так
$(document).on('click', 'input', function () {
alert($(this).attr('id'));
});
|
а если надо будет навешать 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>
|
Цитата:
|
не много не верно выразился, можно было додуматься:
<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>
|
| Часовой пояс GMT +3, время: 15:26. |