StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POClear input text field in Angular / AngularUI with ESC key
text
Body
copied!<p>In several places of my Angular app I need to clear inputs from user with the ESC key. The problem is, I don't know how to do it with text input fields (textarea is clearing OK). See this fiddle:</p> <p><a href="http://jsfiddle.net/aGpNf/188/" rel="nofollow noreferrer">jsFiddle demonstration of the problem</a></p> <p>Binding:</p> <pre><code><input ng-model="search.query" ui-keypress="{esc: 'keyCallback($event)'}" /> </code></pre> <p>Callback I use:</p> <pre><code>$scope.keyCallback = function($event) { $event.preventDefault(); $scope.search.query = ''; } </code></pre> <p>Can anyone, please, figure out <strong>what I need to do to clear text input with ESC key</strong>?</p> <p><strong>SOLUTION:</strong> As adviced by <a href="https://stackoverflow.com/users/651480/bmleite">bmleite</a>, you shouldn't listen for 'keypress' but for <strong>'keydown'</strong> and <strong>'keyup'</strong>. Problem was, that 'keydown' does not work in Firefox so only 'keyup' did the magic trick with listening for ESC. ;)</p> <p>Working fiddle: <a href="http://jsfiddle.net/aGpNf/190/" rel="nofollow noreferrer">http://jsfiddle.net/aGpNf/190/</a></p> <p><strong>SOLUTION UPDATE:</strong> In the end I had to listen for both 'keydown' and 'keyup' events. Because in my case FF does reset input field on ESC keydown to previous state, so it messed up my model. So 'keyup' clears the model and 'keydown' checks if model is empty and does appropriate action. I also need to manually defocus input to prevent text popping back in. :/</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload