fixing focus out on pressing a "esc" key
<p>When the user clicks on a search box, the user sees a "blinking cursor" inside the search box.</p>

<p>I'd like, when the user presses the <kbd>Esc</kbd> key, the "blinking cursor" should leave search box and also focus out from search box. </p>

<p>I need JavaScript code to do it.</p>

<p></p>

<p></p>

<pre><code>input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon .ng');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0 .s ease-in-out;
    transition: width 0 .s ease-in-out;
}

input[type=text] :ocus {
    width: 100%;
}
</code></pre>

<p></p>

<pre><code>&lt;p&gt;Animated search form :/p&gt;

&lt;form&gt;
  &lt;input type="text" name="search" placeholder="Search ."&gt;
&lt;/form&gt;
</code></pre>

<p></p>