Когда происходит событие «размытия», как я могу узнать, на какой фокус элемента * направлено *?

Предположим, я прикрепляю blurфункцию к блоку ввода HTML следующим образом:

<input id="myInput" onblur="function() { ... }"></input>

Есть ли способ получить идентификатор элемента, вызвавшего blurсобытие (элемент, по которому щелкнули) внутри функции? Как?

Например, предположим, что у меня есть диапазон, как это:

<span id="mySpan">Hello World</span>

Если я щелкну на промежутке сразу после фокусировки на элементе ввода, элемент ввода потеряет фокус. Как функция узнает, что на нее mySpanщелкнули?

PS: Если бы событие onclick диапазона произошло до события onblur входного элемента, моя проблема была бы решена, потому что я мог бы установить некоторое значение состояния, указывающее, что конкретный элемент был нажат.

PPS: фон этой проблемы заключается в том, что я хочу, чтобы внешний элемент управления автозаполнения AJAX (из активируемого элемента) запускался, чтобы показать его предложения, без немедленного исчезновения предложений из-за blurсобытия в элементе ввода. Поэтому я хочу проверить в blurфункции, был ли нажат один конкретный элемент, и если это так, игнорировать событие размытия.

Хм ... В Firefox вы можете использовать explicitOriginalTargetэлемент, на который вы нажали. Я ожидал toElementсделать то же самое для IE, но, похоже, он не работает ... Однако вы можете извлечь недавно сфокусированный элемент из документа:

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

Предостережение: этот метод не работает для изменений фокуса, вызванных перелистыванием полей с помощью клавиатуры, и вообще не работает в Chrome или Safari. Большая проблема с использованием activeElement( за исключением IE) является то , что она не постоянно обновляется до тех пор , послеblur того, как событие было обработано, и может не иметь действительное значение вообще при обработке! Это может быть смягчено с помощью вариации техники, в которой Михил использовал :

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
  }, 1);
}

Это должно работать в большинстве современных браузеров (тестируемых в Chrome, IE и Firefox), с той оговоркой , что Chrome не устанавливает фокус на кнопках, которые щелкнули ( по сравнению с вкладками к).

2015 ответ : в соответствии с событиями пользовательского интерфейса , вы можете использовать relatedTargetсвойство события:

Используется для идентификации вторичного EventTargetобъекта, связанного с событием Focus, в зависимости от типа события.

Для blurсобытий,

relatedTarget: цель, получающая фокус.

Пример:

function blurListener(event) {
  event.target.className = 'blurred';
  if(event.relatedTarget)
    event.relatedTarget.className = 'focused';
}
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

.blurred { background: orange }
.focused { background: lime }

<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

Примечание. Firefox не будет поддерживать relatedTargetдо версии 48 ( ошибка 962251 , MDN ).

Я решил это в конце концов с помощью таймаута для события onblur (благодаря совету друга, который не является StackOverflow):

<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>

Работает как в FF, так и в IE.

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

$(document).mousedown(function(){
  if ($(event.target).attr("id") == "mySpan") {
    // some process
  }
});

FocusEventЭкземпляры типа имеют relatedTargetатрибут, однако, до версии 47 FF, в частности, этот атрибут возвращает ноль, из 48 уже работает.

Вы можете увидеть больше здесь .

Я также пытаюсь заставить Autocompleter игнорировать размытие, если щелкнул конкретный элемент и у него есть рабочее решение, но только для Firefox из-за явногоOriginalTarget

Autocompleter.Base.prototype.onBlur = Autocompleter.Base.prototype.onBlur.wrap( 
        function(origfunc, ev) {
            if ($(this.options.ignoreBlurEventElement)) {
                var newTargetElement = (ev.explicitOriginalTarget.nodeType == 3 ? ev.explicitOriginalTarget.parentNode : ev.explicitOriginalTarget);
                if (!newTargetElement.descendantOf($(this.options.ignoreBlurEventElement))) {
                    return origfunc(ev);
                }
            }
        }
    );

Этот код оборачивает метод onBlur по умолчанию для Autocompleter и проверяет, установлены ли параметры ignoreBlurEventElement. если он установлен, он каждый раз проверяет, является ли нажатый элемент ignoreBlurEventElement или нет. Если это так, Autocompleter не вызывает onBlur, иначе он вызывает onBlur. Единственная проблема с этим заключается в том, что он работает только в Firefox, потому что свойство visibleOriginalTarget является специфическим для Mozilla. Теперь я пытаюсь найти другой способ, чем использовать явныйOriginalTarget. Решение, которое вы упомянули, требует, чтобы вы добавили поведение onclick вручную к элементу. Если мне не удастся решить проблему явного ориджинала, думаю, я последую вашему решению.

Можете ли вы изменить то, что вы проверяете и когда? Вот если вы помните, что было размыто последним:

<input id="myInput" onblur="lastBlurred=this;"></input>

и затем в onClick для вашего диапазона вызовите функцию () с обоими объектами:

<span id="mySpan" onClick="function(lastBlurred, this);">Hello World</span>

Ваша функция может затем решить, следует ли запускать элемент управления Ajax.AutoCompleter. Функция имеет объект, по которому щелкнули, и размытый объект. OnBlur уже произошел, поэтому предложения не исчезнут.

Используйте что-то вроде этого:

var myVar = null;

И тогда внутри вашей функции:

myVar = fldID;

А потом:

setTimeout(setFocus,1000)

А потом:

function setFocus(){ document.getElementById(fldID).focus(); }

Финальный код:

<html>
<head>
    <script type="text/javascript">
        function somefunction(){
            var myVar = null;

            myVar = document.getElementById('myInput');

            if(myVar.value=='')
                setTimeout(setFocusOnJobTitle,1000);
            else
                myVar.value='Success';
        }
        function setFocusOnJobTitle(){
            document.getElementById('myInput').focus();
        }
    </script>
</head>
<body>
<label id="jobTitleId" for="myInput">Job Title</label>
<input id="myInput" onblur="somefunction();"></input>
</body>
</html>

Я думаю, что это невозможно, с IE вы можете попробовать использовать window.event.toElement, но это не работает с Firefox!

Как отмечено в этом ответе , вы можете проверить значение document.activeElement. documentэто глобальная переменная, поэтому вам не нужно предпринимать никаких действий, чтобы использовать ее в вашем обработчике onBlur:

function myOnBlur(e) {
  if(document.activeElement ===
       document.getElementById('elementToCheckForFocus')) {
    // Focus went where we expected!
    // ...
  }
}

• document.activeElement может быть родительским узлом (например, узел тела, потому что он находится во временной фазе переключения с цели на другую), поэтому он не может использоваться для вашей области видимости
• ev.explicitOriginalTarget не всегда оценивается

Поэтому лучше всего использовать onclick для события body для косвенного понимания того, что ваш узел (event.target) находится в размытом состоянии.

Работает в Google Chrome v66.x, Mozilla v59.x и Microsoft Edge ... Решение с помощью jQuery.

Я тестирую в Internet Explorer 9 и не поддерживается.

$("#YourElement").blur(function(e){
     var InputTarget =  $(e.relatedTarget).attr("id"); // GET ID Element
     console.log(InputTarget);
     if(target == "YourId") { // If you want validate or make a action to specfic element
          ... // your code
     }
});

Прокомментируйте свой тест в других версиях Internet Explorer.

Редактировать: хакерский способ сделать это - создать переменную, которая отслеживает фокусировку для каждого элемента, который вас интересует. Так что, если вам важно, чтобы myInput потерял фокус, установите для него переменную focus.

<script type="text/javascript">
   var lastFocusedElement;
</script>
<input id="myInput" onFocus="lastFocusedElement=this;" />

Оригинальный ответ: Вы можете передать «это» функции.

<input id="myInput" onblur="function(this){
   var theId = this.id; // will be 'myInput'
}" />

Я предлагаю использовать глобальные переменные blurfrom и blurto. Затем настройте все элементы, которые вам нужны, чтобы назначить их положение в DOM для переменной blurfrom, когда они теряют фокус. Кроме того, сконфигурируйте их так, чтобы при получении фокуса переменная blurto заняла их положение в DOM. Затем вы можете использовать другую функцию для анализа данных размытия и размытия.

имейте в виду, что решение с явнымOriginalTarget не работает для переходов ввода текста в ввод текста.

Попробуйте заменить кнопки следующими текстовыми вводами, и вы увидите разницу:

<input id="btn1" onblur="showBlur(event)" value="text1">
<input id="btn2" onblur="showBlur(event)" value="text2">
<input id="btn3" onblur="showBlur(event)" value="text3">

Я играл с этой же функцией и обнаружил, что FF, IE, Chrome и Opera имеют возможность предоставлять исходный элемент события. Я не тестировал Safari, но думаю, что он может иметь что-то похожее.

$('#Form').keyup(function (e) {
    var ctrl = null;
    if (e.originalEvent.explicitOriginalTarget) { // FF
        ctrl = e.originalEvent.explicitOriginalTarget;
    }
    else if (e.originalEvent.srcElement) { // IE, Chrome and Opera
        ctrl = e.originalEvent.srcElement;
    }
    //...
});

Мне не нравится использовать тайм-аут при кодировании javascript, поэтому я бы сделал это противоположным образом, как Михил Боркент. (Не пробовал код, но вы должны понять).

<input id="myInput" onblur="blured = this.id;"></input>
<span onfocus = "sortOfCallback(this.id)" id="mySpan">Hello World</span>

В голове что-то подобное

<head>
    <script type="text/javascript">
        function sortOfCallback(id){
            bluredElement = document.getElementById(blured);
            // Do whatever you want on the blured element with the id of the focus element


        }

    </script>
</head>

Вы можете исправить IE с помощью:

 event.currentTarget.firstChild.ownerDocument.activeElement

Похоже, что "visibleOriginalTarget" для FF.

Антуан И Дж

Я написал альтернативное решение, как сделать любой элемент фокусируемым и «слепым».

Он основан на создании элемента как contentEditableи скрытии его визуально и отключении самого режима редактирования:

el.addEventListener("keydown", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

el.addEventListener("blur", cbBlur);
el.contentEditable = true;

DEMO

Примечание. Протестировано в Chrome, Firefox и Safari (OS X). Не уверен насчет IE.

Связанный: я искал решение для VueJ, поэтому для тех, кому интересно / интересно, как реализовать такую ​​функциональность с помощью директивы Vue Focusable, пожалуйста, посмотрите .

Сюда:

<script type="text/javascript">
    function yourFunction(element) {
        alert(element);
    }
</script>
<input id="myinput" onblur="yourFunction(this)">

Или, если вы присоединяете слушателя через JavaScript (jQuery в этом примере):

var input = $('#myinput').blur(function() {
    alert(this);
});

Изменить : извините. Я неправильно понял вопрос.

Я думаю, что это легко возможно через jquery, передавая ссылку на поле, вызывающее событие onblur в «this».
Например,

<input type="text" id="text1" onblur="showMessageOnOnblur(this)">

function showMessageOnOnblur(field){
    alert($(field).attr("id"));
}

Спасибо
моника

Вы можете сделать это так:

<script type="text/javascript">
function myFunction(thisElement) 
{
    document.getElementByName(thisElement)[0];
}
</script>
<input type="text" name="txtInput1" onBlur="myFunction(this.name)"/>

Я вижу только хаки в ответах, но на самом деле есть встроенное решение, очень простое в использовании: в основном вы можете захватить элемент фокуса следующим образом:

const focusedElement = document.activeElement

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement