Как получить событие div onblur для выполнения функции javascript?

149
16

Привет
У меня есть div, который содержит три текстовых поля, мне нужна функция, которая будет вызываться после того, как элемент управления вышел из тега div, я не хочу использовать событие onclick, потому что фокус может быть удален из div, нажав вкладку клавиша на клавиатуре или каким-либо другим способом.
Я также хотел бы знать, есть ли способ достичь этого, используя любые библиотеки javascript, такие как jquery.


Спасибо, это пример html-кода


<html>
<head>
<title>Div Onblur test</title>

<script type="text/javascript">
function Callme() {
alert("I am Called")
}
</script>

</head>
<body>
<div onblur="javascript:Callme();">
<input type=text value ="Inside DIV 1" />
<input type=text value ="Inside DIV 2" />
<input type=text value ="Inside DIV 3" />
</div>
<input type=text value ="Outside DIV" />
</body>
</html>

спросил(а) 2011-01-31T08:44:00+03:00 9 лет, 7 месяцев назад
1
Решение
89

Я использовал следующий jQuery script в аналогичном сценарии с 3 текстовыми полями внутри div:


<script type="text/javascript">
$(document).ready(function () {
$("jQuerySelectorToGetYourDiv").focusout(function (e) {
if ($(this).find(e.relatedTarget).length == 0) {
// Focus is now outside of your div. Do something here.
// e.Target will give you the last element within the
// div to lose focus if you need it for processing.
}
});
});
</script>

ответил(а) 2013-03-26T07:38:00+04:00 7 лет, 6 месяцев назад
126

Вы можете связать обработчик события onblur с каждым из входных элементов и проверить обработчик, если какой-либо из них имеет фокус (используя document.activeElement).


<script type="text/javascript">
function checkBlur() {
setTimeout(function () {
if (document.activeElement != document.getElementById("input1") &&
document.activeElement != document.getElementById("input2") &&
document.activeElement != document.getElementById("input3")) {
alert("I am called");
}
}, 10);
}
</script>
<!-- ... -->
<div>
<input type="text" id="input1" value="Inside DIV 1" onblur="checkBlur()" />
<input type="text" id="input2" value="Inside DIV 2" onblur="checkBlur()" />
<input type="text" id="input3" value="Inside DIV 3" onblur="checkBlur()" />
</div>
<input type="text" value="Outside DIV" />

Или вместо этого использование jQuery может упростить процесс (особенно если у вас много входов):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#theDiv input").bind("blur", function () {
setTimeout(function () {
var isOut = true;
$("#theDiv input").each(function () {
if (this == document.activeElement) isOut = false;
});
if (isOut) {
// YOUR CODE HERE
alert("I am called");
}
}, 10);
});
});
</script>
<!-- ... -->
<div id="theDiv">
<input type="text" value="Inside DIV 1" />
<input type="text" value="Inside DIV 2" />
<input type="text" value="Inside DIV 3" />
</div>
<input type="text" value="Outside DIV" />

EDIT: я завернул обработчики событий внутри setTimeout, чтобы убедиться, что другой элемент успел сфокусироваться.

ответил(а) 2011-01-31T09:13:00+03:00 9 лет, 7 месяцев назад
125

Вам нужно добавить tabindex = 0 в div, чтобы получить фокус.
Так что что-то вроде


<div tabindex="-1" onblur="Callme();">

должен это сделать.

ответил(а) 2011-01-31T09:06:00+03:00 9 лет, 7 месяцев назад
69

<html>
<head>
<title>Div Onblur test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function Callme() {
alert("I am Called");
}

$(function() {
var callme;
$('#onblur-callme input')
.focus(function() {
callme = false;
})
.blur(function() {
callme = true;
setTimeout(function() {
if (callme) {
Callme();
}
}, 1);
});
});
</script>

</head>
<body>
<div id="onblur-callme">
<input type="text" value ="Inside DIV 1" />
<input type="text" value ="Inside DIV 2" />
<input type="text" value ="Inside DIV 3" />
</div>
<input type="text" value ="Outside DIV" />
</body>
</html>

ответил(а) 2011-01-31T09:12:00+03:00 9 лет, 7 месяцев назад
41

Возможно, событие onChange лучше будет удовлетворять ваши потребности. Я не могу придумать ситуацию, в которой будет нажата кнопка DIV, а не поля ввода.

ответил(а) 2011-01-31T09:00:00+03:00 9 лет, 7 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема