"esc"キーを押したときにフォーカスが外れる

Question

ユーザーが検索ボックスをクリックすると、ユーザーは検索ボックス内に "点滅カーソル"が表示されます。

ユーザがEscキーを押すと、「点滅カーソル」は検索ボックスを離れて検索ボックスからフォーカスを外す必要があります。

JavaScriptコードが必要です。うまくdocument.getElementById("search").blur()押された "ESC" 作品を、ここで、 "検索" を使用

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

は

<p>Animated search form :/p> 

<form> 
    <input type="text" name="search" placeholder="Search ."> 
</form> 

Answer 1

検索ボックスに与えられたIDです。

document.onkeydown = function(evt) { 
 
    evt = evt || window.event; 
 
    if (evt.keyCode == 27) {//27 is the code for escape 
 
     document.getElementById("search").blur(); 
 
    } 
 
};

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.png'); 
 
    background-position: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 40px; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
} 
 

 
input[type=text]:focus { 
 
    width: 100%; 
 
}

<p>Animated search form:</p> 
 

 
<form> 
 
    <input id="search" type="text" name="search" placeholder="Search.."> 
 
</form>

Answer 2

あなたはjQueryの言及ので - ここではそのためのソリューションです。

$('input[type=text]').keyup(function(e) { 
 
    if (e.keyCode === 27) $(this).blur(); 
 
});

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.png'); 
 
    background-position: 10px 10px; 
 
    background-repeat: no-repeat; 
 
    padding: 12px 20px 12px 40px; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
} 
 

 
input[type=text]:focus { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Animated search form:</p> 
 

 
<form> 
 
    <input type="text" name="search" placeholder="Search.."> 
 
</form>