angular modalservice does not respond to enter Key

Question

I have the following Modal dialog using ui.boostratp & anuglar modal service

<div id="modalDialog" class="modal-dialog">
    <div class="modal-header">
        <h2 style="text-align: center">{{modalOptions.headerText}}</h2>
    </div>
    <div class="modal-body">
        <p>{{modalOptions.bodyText}}</p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
        <button type="button" id="OK" class="btn btn-danger" ng-enter="modalOptions.ok();" autofocus data-ng-click="modalOptions.ok();" data-ng-keyup="$event.keycode == 13 && modaloptions.ok()">{{modalOptions.actionButtonText}}</button>
    </div>
</div>
<script type="text/javascript">
       $(document).ready(function () {
           console.log('Modal Template Loaded');
           $('#OK').focus();

           $("#modalDialog").keydown(function (event) {
               console.log("Event mapped")
               if (event.keyCode == 13) {
                   $(this).parent()
                          .find("button:eq(0)").trigger("click");
                   return false;
               }
           });

       }); //document

</script>

I tried out multiple ways, but none of it worked. after the dialog box loads the 'Modal Template Loaded' is logged to console. the form works using Mouse though, but want it to work for enter key. how do i get it working for Enter Key ?

i believe you are using something like this: https://gist.github.com/EpokK/5884263, right? — batmaniac7, Apr 16 '15 at 20:57

score 2 · Answer 1 · answered Apr 17 '15 at 20:20

2

I figured out that the Key event were being captured on the Parent form and not in the dialog box.

So i wrote a JavaScript to trigger click from parent window like shown below.

document.onkeypress = function (e) {
                console.log("key Press " + e.keyCode);

                if (e.keyCode == 13)
                    $("#ModalOKButton").trigger("click");
            };

answered Apr 17 '15 at 20:20

user3799325

590
1
8
20

This works fine, thanks!. It seems angular modal service doesn't handle the focus very well. – Guille May 18 '17 at 15:44

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

You can wrap the modal in form tags and then use ng-submit. Note that you should use ng-submit on its own, without ng-click.

Also see this: Angular-UI $dialog and form submit on enter key

edited May 23 '17 at 12:26

Community

1
1

answered Apr 16 '15 at 21:12

chinaowl

532
5
15

angular modalservice does not respond to enter Key

2 Answers2