Событие размытия не запускается - не удается найти обходной путь для работы с текстовым полем " скрыть размытие

TL; DR как я могу получить этот самоочевидный JSFiddle работать?

С организация W3C:

событие размытие происходит, когда элемент теряет фокус либо с помощью указывающего устройства или клавиш навигации. Это событие допустимо для следующих элементов: LABEL, INPUT, SELECT, TEXTAREA и BUTTON.

основная идея, HTML:

<form>
    <label>
        <input type="text" />
        <a href="#">after focusing in input, there should be no blur when clicking here</a>
    </label>
</form>
<a href="#">but blur should fire when clicking here</a>

и JS:

$("form, label").on("blur", function() {
    alert("you're not going to see this");
});

это не работает. Более наглядный пример приведен в это JSFiddle.

я тоже пробовал focusout С это JSFiddle, но (предположительно, потому что он пузырится от входа), он всегда срабатывает.

Я, вероятно, мог бы настроить то, что мне нужно с помощью такого взлома:https://stackoverflow.com/a/5049387/458614

8
blur html javascript javascript-events jquery

7 ответов

что я думаю, что вы ищете

e.stopPropagation();

эта скрипка здесь показывает немного другой способ справиться с этим ... он поместил hide на щелчок окна (который в любом случае размыл бы вход), кроме метки, что позволило бы событию click остановиться внутри метки.

удачи в кодировании!

1

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

  $(document).on("blur", "label",function() {
       $("div").append("form or label blurred<br>");
   });

вот демо Скрипка

0

попробуйте это, он должен работать 

.focus {
border-color:red;
}


$(document).ready(function() {    

    $('input').blur(function(){
            $('input').removeClass("focus");
        })
             .focus(function() {        
                 $(this).addClass("focus")
        });

});
0

добавьте этот кусок js в свою скрипку. вы добавили прослушиватель для метки, но размытие происходит на теге anchor.

      $("form a").on("blur", function() {
              $("div").append("form or label blurred<br>");
       });
0

согласно вашему объяснению, я создал демо

$("form > label >a").on("blur", function() {
      return false
});

    $("#outsideform > a").on("blur", function() {
    alert("but blur should fire when clicking here");
});

Проверьте демо здесь

0

некоторое время я публикую промежуточную разработку. Но это определенно поможет вам, где именно вы должны искать. реализация jquery, но не ваш javascript. этой это реальная проблема.

я добавил 3 строки в разных местах. никаких больших изменений.

  1. добавил || $("input").css("visibility") == "visible" в if условие
  2. добавил $("input").css("visibility","hidden"); к внутреннему условию else
  3. $("input").css("visibility","visible"); к внешнему (и последнему) другое условие.

обратите внимание, что это промежуточное, вам нужно нажать дважды после отправки непустого текста. Если у меня будет время, я отправлю правильную рабочую вещь. этой - это скрипка.

0

tobek, ваш JSFiddle с моей лучшей попыткой почти нет. Проблема заключается в вашем селекторе внизу в этом разделе кода:

$("input").on("blur", function(){
    $("input").hide();
});

вы правильно сформулировали проблему в своих комментариях, когда сказали:"проблема: мы никогда не попадаем сюда, потому что она уже скрыта, потому что вход размыт".

измените вышеуказанный раздел на этот, и я думаю, у вас будет то, что вы ищете.

$("input-blur label").on("blur", function(){
    $("input").hide();
});

потому что "добавить тег" ссылка находится внутри метки, щелкая по ней, не запускает вашу функцию "размытия".

0