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

предположим, я приложу blur функция в поле ввода HTML, как это:



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


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



например, предположим, что у меня период такой:



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


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



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



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

554   23  

23 ответов:

Мда... В 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) заключается в том, что он не постоянно обновляется до после the blur событие было обработано, и может не иметь действительного значения вообще во время обработки! Это может быть смягчено с изменением на техника Michiel в конечном итоге с помощью:

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 не устанавливает фокус на кнопки, которые выбрали (против закладка в).

78  
2017-05-23 14:33:26

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

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

на 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).

51  
2016-05-23 14:20:55

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

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

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

18  
2008-09-24 20:17:36

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

$(document).mousedown(function(){
  if ($(event.target).attr("id") == "mySpan") {
    // some process
  }
});
16  
2010-04-03 22:49:13

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

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

4  
2018-06-07 23:19:36

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

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, потому что свойство explicitOriginalTarget является специфичным для Mozilla . Теперь я пытаюсь найти другой способ, чем с помощью explicitOriginalTarget. Решение, которое вы упомянули, требует, чтобы вы добавили поведение onclick вручную к элементу. Если мне не удастся решить проблему explicitOriginalTarget, я думаю, я буду следовать вашему решению.

2  
2008-10-07 13:56:06

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

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

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

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

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

2  
2014-10-17 20:05:55

использовать что-то вроде этого:

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>
1  
2012-01-13 17:48:36

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

1  
2014-09-04 22:12:14

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

function myOnBlur(e) {
  if(document.activeElement ===
       document.getElementById('elementToCheckForFocus')) {
    // Focus went where we expected!
    // ...
  }
}
1  
2017-05-23 15:18:36
  • документ.activeElement может быть родительским узлом (например, body node, поскольку он находится во временном фазовом переключении с целевого объекта на другой), поэтому он не может использоваться для вашей области
  • ev.explicitOriginalTarget не всегда ценится

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

1  
2017-05-06 23:39:48

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

<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'
}" />
0  
2008-09-23 18:21:26

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

0  
2008-09-24 02:40:42

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

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

<input id="btn1" onblur="showBlur(event)" value="text1">
<input id="btn2" onblur="showBlur(event)" value="text2">
<input id="btn3" onblur="showBlur(event)" value="text3">
0  
2009-06-04 01:06:35

Я играл с этой же функцией и выяснил, что 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;
    }
    //...
});
0  
2011-06-01 18:26:59

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

<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>
0  
2012-04-03 10:27:31

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

 event.currentTarget.firstChild.ownerDocument.activeElement

это выглядит как" explicitOriginalTarget " для FF.

Антуан И J

0  
2016-06-29 16:26:40

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

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

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

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

демо

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

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

0  
2017-03-25 00:41:04

работает в 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.

0  
2018-05-15 03:16:51

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

const focusedElement = document.activeElement

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

0  
2018-08-15 11:52:31

таким образом:

<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);
});

Edit: к сожалению. Я неправильно понял вопрос.

-2  
2008-09-23 20:44:20


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

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

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

спасибо
Моника

-2  
2012-08-17 14:15:52

вы могли бы сделать это вот так:

<script type="text/javascript">
function myFunction(thisElement) 
{
    document.getElementByName(thisElement)[0];
}
</script>
<input type="text" name="txtInput1" onBlur="myFunction(this.name)"/>
-2  
2015-04-17 19:10:01

Comments

    Ничего не найдено.
Click here to cancel reply.