<input type="text" id="search" size="25" autocomplete="off"/>

I know it is something with

onkeydown="if (event.keyCode == 27)

   <input type="text" id="search" size="25" autocomplete="off"/>

I know it is something with

onkeydown="if (event.keyCode == 27)

• javascript
• html
• css

4 Answers 4

Declare a function which will be called when a key is pressed:

function onkeypressed(evt, input) {
    var code = evt.charCode || evt.keyCode;
    if (code == 27) {
        input.value = '';
    }
}

And the corresponding markup:

<input type="text" id="search" size="25" autocomplete="off" 
       onkeydown="onkeypressed(event, this);" />

<input type="text" value="" onkeyup="if ( event.keyCode == 27 ) this.value=''" />

This should work.

$('input[type=text]').each(function (e) {
    $(this).keyup(function (evt) {
        var code = evt.charCode || evt.keyCode;
        if (code == 27) {
            $(this).val('');
        }
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" autofocus value="input data" placeholder="ESC button clear" style="padding:5px;">
<p>Hit esc button to see result</p>

function keyPressed(evt) {
 if (evt.keyCode == 27) {
    //clear your textbox content here...
    document.getElementById("search").value = '';
 }
}

Then in your input tag...

<input type="text" onkeypress="keyPressed(event)" id="search" ...>