AngularJS - Accept a ui.bootstrap modal with ENTER key

Question

The Issue:
I've been unable to to accept a modal window with the ENTER key

I have modified the default Plunker to show you what I've done since now --> Here

What I have:
Briefly, the ENTER key is recognized by the modal, but it doesn't trigger my function (scope issues, I suspect).

The bad part is that I had to modifiy the template/modal/window, which I would gladly left unspoiled, if possible.

What I would love
I would love to simply put the ng-enter directive in my modal, without modifying the default template

Extra
I've also tried to add the "event 13" to the modal directive, but I couldn't pass any result in the modal.close, so I dropped that road

Any thought?

If you move your ng-enter directive and tab-index to the template defined in your html it works. However you must click on the div to give it focus to work. plunker — Jonathan Palumbo
– Jonathan Palumbo, Commented Feb 7, 2014 at 18:24
Wrap the modal in a <form> and put an <input type="submit" ng-click="closeModal()"/>. — Cory Silva
– Cory Silva, Commented Jun 16, 2014 at 3:34
@CorySilva you should post this as the answer. The OP should also make sure that if using multiple button tags in the form that only one button should have type="submit" and the rest of the buttons should be type="button". — Sunil D.
– Sunil D., Commented Jul 1, 2014 at 2:09

s.alem · Accepted Answer · 2014-07-01 01:04:02Z

6

Check my Plunker. You should add ng-enter to "OK" button.

<button class="btn btn-primary" ng-enter="ok();" ng-click="ok()">OK</button>

Maybe you are looking for something more generic, I'm not sure. Then you might consider watchers. But personally I find this better since we don't have any constant watcher which listens modal event.

answered Jul 1, 2014 at 1:04

s.alem

13.2k9 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

squarism Over a year ago

For me, this plunker doesn't allow enter to hit OK when the form has focus.

s.alem Over a year ago

Works fine for me. Could you describe exact steps for me to reproduce the problem? And the browser of course...

llamerr Over a year ago

Works for me in latest chrome/ff

Keshav1007 Over a year ago

if i close the modal using esc then if i click again open me and hit enter it is throwing TypeError: undefined is not an object (evaluating 'openedWindows.get(modalInstance).value')

Pylinux · Accepted Answer · 2015-05-19 20:01:08Z

I have found that it is easiest just to add the enter event handler in the controller of the modal:

var text = "This is the text in the modal";
var modalPromise = $modal.open({
    template:
    '<div class="modal-body">' +
    '<button class="close" ng-click="$dismiss(\'×\')">×</button>'+
    '<h3 ng-bind="body"></h3>'+
    '</div>'+
    '<div class="modal-footer">'+
    '<button class="btn btn-primary" ng-click="$close(\'ok\')">OK</button>'+
    '<button class="btn btn-warning" ng-click="$dismiss(\'cancel\')">Cancel</button>'+
    '</div>',
    controller: function ($scope, $document) {
        $scope.body = text;

        var EVENT_TYPES = "keydown keypress"
        function eventHandler(event) {
            if (event.which === 13) {
                $scope.$close('ok');
            }
        }
        $document.bind(EVENT_TYPES, eventHandler);
        $scope.$on('$destroy', function () {
            $document.unbind(EVENT_TYPES, eventHandler);
        })
    }
}).result;

Major · Accepted Answer · 2015-08-29 20:01:48Z

4

AngularJS support this be default.

Add a <form> tag in your template (modal.html) and add ng-submit directive e.g.

<form name="questionForm" ng-submit="ok()">
  <div class="modal-header">
    <h3 class="modal-title">{{title}}</h3>
  </div>
  // the rest of the code here
</form>

answered Aug 29, 2015 at 20:01

Major

4551 gold badge5 silver badges15 bronze badges

6 Comments

domokun Over a year ago

You shouldn't add a form if you're not creating an actual form. It totally breaks the semantic HTML, thus also breaking accessibility by default.

Major Over a year ago

I assumed, the "rest of the code" contains all the input groups.

domokun Over a year ago

Well, a form is supposed to be used to send data around. A modal can be used for whatevz, like warning or confirmation.

Major Over a year ago

I disagree. A modal can also be used as data submission. E.g. entering quick comment on a post.

domokun Over a year ago

Definitely. It's the other way around that should not be done, that is, using form when not sending data.

|

Collectives™ on Stack Overflow

AngularJS - Accept a ui.bootstrap modal with ENTER key

3 Answers 3

4 Comments

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related