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

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

Я играл с этой же функцией и обнаружил, что 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;
    }
    //...
});

Answer 3

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

Это основано на создании элемента как 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, пожалуйста, посмотрите .

Answer 4

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

Answer 5

Имейте в виду, что решение с явным значением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">

Answer 6

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

 event.currentTarget.firstChild.ownerDocument.activeElement

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

Антуан А, J

Answer 7

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

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

Answer 8

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

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

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

Спасибо
Monika

Answer 9

Мне не нравится использовать тайм-аут при кодировании 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>

Answer 10

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

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

Редактировать : извините. Я неправильно понял вопрос.