CODEWITHSUNDEEP
javascriptangularjsangularjs-directivedirective
Sean Bugeja
Sean Bugeja

Reputation: 164

AngularJS directive to make input respond on enter

I apologize if the question is vague, I'm not quite sure how else to explain what I need. There are some dirty options which come to mind, but I'm a novice AngularJS coder and I feel there is a clean simple method to implement this with directives maybe?

What I need is an input box that waits for an ENTER keypress, and fires, and action when it gets it. The action is a simple get from an external JSON object based on the input entered before the enter was pressed.

The field should also reset to empty on each newline keypress.

:

Upvotes: 0

Views: 406

Answers (3)

Ronan
Ronan

Reputation: 46

You could use the angular keyUp directive, with event.keycode == 13

html

<input ng-keyup="enterThis($event)" ng-model=""></input>

controller

$scope.enterThis = function(event){ 
    if (event.keyCode === 13){
        //do whatever

        //clear the input
        $scope.enterInput = '';

}

Upvotes: 1

arcade Gandalf
arcade Gandalf

Reputation: 175

This should get you started:

app.directive('enter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown keypress", function(event) {
            if(event.which === 13) {
            }
        });
    };
});

To reset the input just bind the input to a model and set the model to an empty string.

For communicating with your server you can use angular's http module.

Upvotes: 0

Renan Le Caro
Renan Le Caro

Reputation: 365

Ng-submit to the rescue ! You can easily make it work by wrapping the input in a form (that has a name). One big plus : this will work on mobile, they'll have a shortcut to "submit" next to the keyboard.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>

  
<form 
  name="theFormNeedsANameForNgSubmitToFire" 
  ng-submit="myScopeInfos='Enter pressed and mytext was '+mytext;mytext='';">

  <input type="text" ng-model="mytext"/>

</form>

<div>{{myScopeInfos}}</div>
</div>

Upvotes: 1

Related Questions