I have an `&lt;input type=&quot;text&quot;&gt;` field and I need to clear it when this field loses focus (whiech means that user clicked somewhere on the page). But there is one exception. Input text field should&#39;t be cleared when user clicks on a specific element.

I tried to use `event.relatedTarget` to detect if user clicked not just somewhere but on my specific `&lt;div&gt;`.

However as you can see in snippet below, it simply doesn&#39;t work. `event.relatedTarget` is always returning `null`!

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    function lose_focus(event) {
      if(event.relatedTarget === null) {
        document.getElementById(&#39;text-field&#39;).value = &#39;&#39;;
      }
    }

&lt;!-- language: lang-css --&gt;

    .special {
      width: 200px;
      height: 100px;
      background: #ccc;
      border: 1px solid #000;
      margin: 25px 0;
      padding: 15px;
    }
    .special:hover {
      cursor: pointer;
    }

&lt;!-- language: lang-html --&gt;

    &lt;input id=&quot;text-field&quot; type=&quot;text&quot; onblur=&quot;lose_focus(event)&quot; placeholder=&quot;Type something...&quot;&gt;

    &lt;div class=&quot;special&quot;&gt;Clicking here should not cause clearing!&lt;/div&gt;

&lt;!-- end snippet --&gt;

All Focusout Solutions on Gang of Coders

Total of 1 Focusout Solutions

blur event.relatedTarget returns null