引导模式对话框中的默认按钮答案

【问题标题】：Default button in bootstrap modal dialog引导模式对话框中的默认按钮
【发布时间】：2015-08-10 06:10:51
【问题描述】：

我正在尝试在引导模式中设置默认按钮。这是代码：http://plnkr.co/edit/1aLlDdL8WfkUrBVt4q31?p=preview

在模态窗口中，我希望提交按钮是默认的。

我尝试按照代码进行操作，但没有成功。

$("#userNameModal").keyup(function(event){
       if(event.keyCode == 13){
           $("#submitUserNameBtn").click();
       }
});

感谢任何帮助。

【问题讨论】：

你到底想做什么？在按键上类似于单击提交按钮？
当模态对话框处于焦点并且用户点击回车键时，'提交'按钮点击事件应该被触发。

标签： javascript jquery angularjs twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

用<form> 包装代码并设置正确的按钮类型：type="submit" 用于提交按钮，type="button" 用于其他按钮。

修改后的plunker：http://plnkr.co/edit/XD2UzlBnPbBafWmWfTg0?p=preview

【讨论】：

【解决方案2】：

由于您使用的是 Angular，因此我将只使用指令。这样您就可以在您的应用程序中使用它（底部还有工作 plnkr 的链接）：

.directive('enterSubmit', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            elem.bind('keydown', function(event) {
                var code = event.keyCode || event.which;
                if (code === 13) {
                    if (!event.shiftKey) {
                        event.preventDefault();
                        scope.$apply(attrs.enterSubmit);
                    }
                }
            });
        }
    }
});

然后从你的输入中调用它：

enter-submit="submitUserName()"

这是工作修订的 PLNKR：http://plnkr.co/edit/STXwWPxWIWpDSkIo9ruG?p=preview

【讨论】：