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

问题描述 投票:0回答:3

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

在模式窗口中,我希望“提交”按钮成为默认按钮。

enter image description here

我尝试遵循代码但没有成功。

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

如有任何帮助,我们将不胜感激。

javascript jquery angularjs twitter-bootstrap twitter-bootstrap-3
3个回答
6
投票

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

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


1
投票

由于您使用的是 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


0
投票

你离得太近了!可以做的是将焦点设置到文本输入,然后监听该元素上的 Enter 按键。

function renameSys() {
    BootstrapDialog.show({
        title: 'Rename Instrument',
        message: 'Enter new name: <input id="newname" type="text" maxlength=30 class="form-control">',
        buttons: [{
            label: 'OK',
            cssClass: 'btn-primary col-2',
            action: function (dialogRef) {
                return _renameSys(dialogRef);
            },
        }, {            
            label: 'Cancel',
            cssClass: 'btn-secondary col-2',
            action: function (dialogRef) {
                dialogRef.close();
            }
        }],
        onshown: function (dialogRef) {
            $('#newname').focus();
            $("#newname").keyup(function (event) {
                if (event.keyCode == 13) {
                    _renameSys(dialogRef);
                }
            });
        }
    });
}

函数 _renameSys 可以验证输入数据,如果验证失败则返回 false,保持对话框显示。

function _renameSys(dialogRef) {
    var newname = dialogRef.getModalBody().find('input').val();
    ... // do something
    return true;
}
© www.soinside.com 2019 - 2024. All rights reserved.