Sharing Top Content from the Angular-sphere.

[SOLVED] Clear input text field in Angular / AngularUI with ESC key- Angular.js Recipes

  • In several places of my Angular app I need to clear inputs from user with the ESC key.
  • See this fiddle:

    Can anyone, please, figure out what I need to do to clear text input with ESC key?

  • SOLUTION: As adviced by bmleite, you shouldn’t listen for ‘keypress’ but for ‘keydown’ and ‘keyup’.
  • Problem was, that ‘keydown’ does not work in Firefox so only ‘keyup’ did the magic trick with listening for ESC.
  • Because in my case FF does reset input field on ESC keydown to previous state, so it messed up my model.

The accepted answer does not work for IE 10/11. Here is a solution based on another question that does:

Directive

.directive(‘escKey’, function () {
return function (scope, element, attrs) {
element.bind(‘keydown keypress’, function (event) {
if(event.which === 27) { // 27 = esc key
scope.$apply(function (){
scope.$eval(attrs.escKey);
});

event.preventDefault();
}
});
};
})

HTML:

<input … ng-model=”filter.abc” esc-key=”resetFilter()” >

Ctrl

$scope.resetFilter = function() {
$scope.filter.abc = null;
};


@angular_recipe: Clear input text field in Angular / AngularUI with ESC key #Angular #AngularJS

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:

jsFiddle demonstration of the problem

Binding:

Callback I use:

Can anyone, please, figure out what I need to do to clear text input with ESC key?

SOLUTION: As adviced by bmleite, you shouldn’t listen for ‘keypress’ but for ‘keydown’ and ‘keyup’. Problem was, that ‘keydown’ does not work in Firefox so only ‘keyup’ did the magic trick with listening for ESC. 😉

Working fiddle: http://jsfiddle.net/aGpNf/190/

SOLUTION UPDATE: 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. :/

The accepted answer does not work for IE 10/11. Here is a solution based on another question that does:

Directive

HTML:

Ctrl

import { Directive, Output, EventEmitter, ElementRef, HostListener } from ‘@angular/core’; @Directive({ selector: ‘[escapeInput]’ }) export class escapeInput { @Output() ngModelChange: EventEmitter = new EventEmitter(); private element: HTMLElement; private KEY_ESCAPE: number = 27; constructor(private elementRef: ElementRef) { this.element = elementRef.nativeElement; } @HostListener(‘keyup’, [‘$event’]) onKeyDown(event) { if (event.keyCode == this.KEY_ESCAPE) { event.target.value = ”; this.ngModelChange.emit(event.target.value); } } }

element.bind(‘keydown keypress’, function (e) { if(e.which === 27) { // 27 = esc key // code for clearing data e.preventDefault(); // prevents the default function of the event } });

… vm.checkEvents = function ($event) { if ($event.keyCode == 27) { vm.item = “”; } }

mod.directive(‘escClear’, [‘$timeout’, ‘$parse’, function($timeout, $parse) { return { link : function(scope, element, attributes, ctrl) { var modelGetter = $parse(attributes.ngModel); element.bind(‘keydown’, function(e) { if (e.keyCode === $.ui.keyCode.ESCAPE && modelGetter(scope)) { $timeout(function() { scope.$apply(function () {modelGetter.assign(scope, ”);}); }, 0); } }); } }; }]);

Angular.js Recipes are structured in a Cookbook format featuring recipes that contain problem statements and solutions. A detailed explanation follows each problem statement of the recipe. This is usually contained within the solution; however, an optional discussion section can often contain other useful information helping to demonstrate how the solution works.

Angular.js is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Lost? Begin by working through Angular’s Getting Started Guide to get yourself up-and-running.

[SOLVED] Clear input text field in Angular / AngularUI with ESC key- Angular.js Recipes

Comments are closed, but trackbacks and pingbacks are open.