如何在 bootstrap 模态内的 kendo-ui 网格输入上设置输入焦点

Question

在将 kendo-ui 网格移动到 bootstrap 模式之前，我会单击“添加行”，然后将选择 3 个输入中的第一个。然后我会切换到第 2 个，然后切换到第 3 个，然后切换到复选框按钮，我将在其中按 enter 键并添加该行。然后焦点将返回到“添加行”按钮，我可以在其中按回车键重新开始流程。好吧，现在它在一个模式中，我失去了除了标签之外的一切。我找到了使用 jquery 来应用焦点的解决方案，但我的网格控制器中已经有了它。

Kendo-ui网格控制器

 $scope.mainGridOptions = {
        dataSource: dataSource,
        pageable: false,
        toolbar: [{ name: "create", text: "Add Product", }],
        columns: [
        { field: "product", title: "Product", width: "95px", editor: productEditor },
        {
            field: "price", title: "Price", width: "95px", format: "{0:c2}", editor: priceEditor
        },
        {
            field: "sqft", title: "Square Feet", width: "95px", editor: sqftEditor
        },
        {
            command: [{ name: 'edit', text: { edit: '', update: '', cancel: '' }, width: '20px' }, { name: 'destroy', text: '' }], title: '&nbsp;', width: '80px'
        }],
        editable: 'inline'
    };

    function productEditor(container, options) {
        $('<input id="product" name="product" data-bind="value:product" data-productvalidation-msg="Put the Product!" />')
           .appendTo(container)
           .kendoMaskedTextBox({});
        $("#product").focus(function () {
            var input = $(this);
            setTimeout(function () {
                input.select();
            });
        });
    };

    function priceEditor(container, options) {
        $('<input id="price" name="price" data-bind="value:price" data-step="10000" style="" data-productvalidation-msg="Put the Price!"/>')
            .appendTo(container)
            .kendoNumericTextBox({ format: 'c0', min: 0 });
        $("#price").focus(function () {
            var input = $(this);
            setTimeout(function () {
                input.select();
            });
        });
    }

    function sqftEditor(container, options) {
        $('<input id="sqft" name="sqft" data-bind="value:sqft" data-step="500" style="" data-productvalidation-msg="Put the Sqft!"/>')
            .appendTo(container)
            .kendoNumericTextBox({ format: '0', min: 0 });
        $("#sqft").focus(function () {
            var input = $(this);
            setTimeout(function () {
                input.select();
            });
        });
    };

模态

 <!-- Grid Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <div style="width:100%"><span class="modal-label">My Product Data</span><button style="float:right" class="btn btn-custom waves-effect" data-dismiss="modal"><i class="zmdi zmdi-close"></i></button></div>
                                </div>
                                <div class="modal-body">
                                    <div kendo-grid id="grid" options="mainGridOptions"></div>
                                </div>
                            </div>
                        </div>
                    </div><!--End Grid Modal -->

打开模态的函数

$scope.openGrid = function () {
    $('#myModal').modal('show');
};

Answer 1

在 API 函数 NumericTextBox Kendo-UI 控件上显示可以通过执行以下伪代码获得焦点：

var numerictextbox = $("#numerictextbox").data("kendoNumericTextBox");
numerictextbox.focus();

所以将它应用到您的代码中，它看起来像这样：

var price= $("#price").data("kendoNumericTextBox");
price.focus();

此外，由于您的模态弹出窗口更像是一个应用程序，我建议将可访问性属性从

切换为

role="document" to role="application"

Answer 2

我认为焦点是从 bootstrap 模式本身劫持的，您可以使用 shown 事件并相应地设置焦点。

参考：

Bootstrap provides custom events for most plugins' unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is triggered on the completion of an action.

As of 3.0.0, all Bootstrap events are namespaced.

All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

代码：

$('#myModal').on('shown.bs.modal', function () {
    //your current focus set
});

Answer 3

试试这个……在显示模式中 window

this.$workModal.on('show.bs.modal', (e) => {
    $('#workId_input').data('kendoNumericTextBox').focus();
});

在UI...你需要输入ID...

<input id='workId_input', data-bind="kendoNumericTextBox ......">

Answer 4

试试这个..您只需要关闭 Bootstrap 附加的事件侦听器。

 $('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
    });

如何在 bootstrap 模态内的 kendo-ui 网格输入上设置输入焦点

how to set input focus on kendo-ui grid input inside bootstrap modal

javascript

jquery

twitter-bootstrap

kendo-ui

kendo-grid