javascript - fixing focus out on pressing a "esc" key - Stack Overflow

admin管理员组

文章数量:1350100

When the user clicks on a search box, the user sees a "blinking cursor" inside the search box.

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

I need JavaScript code to do it.

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>

When the user clicks on a search box, the user sees a "blinking cursor" inside the search box.

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

I need JavaScript code to do it.

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>

• javascript
• html
• css

Share Improve this question Follow edited Oct 21, 2016 at 21:18 Heretic Monkey 12.1k77 gold badges6161 silver badges131131 bronze badges asked Oct 21, 2016 at 13:14 Archi PatelArchi Patel 17311 gold badge33 silver badges1616 bronze badges 2

• function keyCode(event) { var esckeyp = event.keyCode; if (esckeyp == 27) { } } – Archi Patel Commented Oct 21, 2016 at 13:22
• Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example (stackoverflow./help/mcve) – Joel Brewer Commented Oct 21, 2016 at 16:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Using document.getElementById("search").blur() when "esc" is pressed works just fine, where "search" is an id given to the search box.

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>

Since you mentioned jQuery - here is the solution for that.

$('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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Animated search form:</p>

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

本文标签： javascriptfixing focus out on pressing a quotescquot keyStack Overflow