0

ui.boostratp と anuglar モーダル サービスを使用して、次のモーダル ダイアログがあります。

<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>

複数の方法を試しましたが、どれもうまくいきませんでした。ダイアログ ボックスがロードされた後、「ロードされたモーダル テンプレート」がコンソールに記録されます。ただし、フォームはマウスを使用して機能しますが、Enter キーで機能させたいと考えています。Enter Key で機能させるにはどうすればよいですか?

4

2 に答える 2

2

Key イベントがダイアログ ボックスではなく、親フォームでキャプチャされていることがわかりました。

そこで、以下に示すように、親ウィンドウからクリックをトリガーする JavaScript を作成しました。

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

                if (e.keyCode == 13)
                    $("#ModalOKButton").trigger("click");
            };
于 2015-04-17T20:20:03.313 に答える