CODEWITHSUNDEEP
javascriptangularjsinternet-explorer-10angularjs-ng-click
Jason O.
Jason O.

Reputation: 3300

IE10 Event Handling for button ng-click and ng-keyup

In my HTML file, I have a text box and a button, and they are not related in any ways. The weird thing is that when I enter text into the text box and hit enter on the keyboard, it actually runs the function connected to the button's ng-click attribute. This only happens on IE10, but not IE11 or any other browers.

Any idea why this might be happening?

HTML

<h3>Group Fields  <input id="groupfields" ng-keyup="fr_group_update($event)"  ng-model="groupfields"></h3>

<div>
  <button ng-click="purge_tasks()">Purge Selection</button> <br/>
</div>

Controller

$scope.fr_group_update = function(event){ 
    if (event.keyCode === 13) {
        alert("This should run");
    }
};

$scope.purge_tasks = function(event){ 
    alert("This runs instead");
};

Upvotes: 3

Views: 1674

Answers (3)

Zuljin
Zuljin

Reputation: 85

For IE a clean/fast solution (at least in my case):

$event.stopPropagation();

HTML

<h3>Group Fields  <input id="groupfields" ng-keyup="fr_group_update($event)"  ng-model="groupfields"></h3>

<div>
  <button ng-click="purge_tasks()">Purge Selection</button> <br/>
</div>

JavaScript

$scope.fr_group_update = function(event){ 
    $event.stopPropagation();
    if (event.keyCode === 13) {
        alert("This should run");
    }
};
$scope.purge_tasks = function(event){ 
    alert("This runs instead");
};

Upvotes: 0

Michael Benford
Michael Benford

Reputation: 14104

IE10 seems to handle buttons with no type property as if they were submit buttons. So when you press enter on any input on the page, it triggers the first button it finds.

You can easily fix that by explicitly setting the type attribute as button:

<button type="button" ng-click="purge_tasks()">Purge Selection</button>

Upvotes: 5

Meligy
Meligy

Reputation: 36594

Angular form used to have an interesting behaviour: if there is only one button in the form, it sets the form submit to the click of that button. When you press Enter in the textbox, you trigger the form submit.

Now I don't know why this is IE version specific, but this is the closest thing I can tell. Maybe IE 10 is doing something similar even without a form.

If you don't need and don't have a form, add one around the button, or try setting the type to button explicitly and see if it helps.

Upvotes: 0

Related Questions