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

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

15 голосов
/ 31 января 2011

Привет, у меня есть div, который содержит три текстовых поля, мне нужно вызывать функцию, когда элемент управления выходит из тега div, я не хочу использовать событие onclick, потому что фокус может быть перемещен из divнажав клавишу Tab на клавиатуре или другим способом.Я также хотел бы знать, есть ли способ достичь этого с помощью любых библиотек 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>

Ответы [ 5 ]

10 голосов
/ 31 января 2011

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

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

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

9 голосов
/ 31 января 2011

Вы можете привязать обработчик события 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" />

РЕДАКТИРОВАТЬ: я обернул обработчики событий в setTimeout, чтобы убедиться, что у другого элемента было времясосредоточиться.

4 голосов
/ 26 марта 2013

Я использовал следующий скрипт jQuery в аналогичном сценарии с 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>
2 голосов
/ 31 января 2011 
<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>
0 голосов
/ 31 января 2011

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

...