如何在引导模式内的kendo-ui网格输入上设置输入焦点

Posted 2023-05-07

【中文标题】如何在引导模式内的kendo-ui网格输入上设置输入焦点

【英文标题】：how to set input focus on kendo-ui grid input inside bootstrap modal

【发布时间】：2015-12-18 00:22:06

【问题描述】：

在引导模式中移动我的 kendo-ui 网格之前，我会单击 Add Row 并选择 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: ' ', 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');
;

【问题讨论】：

尝试删除辅助标记属性 role=document 以查看是否是导致问题的原因。 role=application 可能更相关。

【参考方案1】：

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

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

因此，将其应用到您的代码中，它看起来像这样：

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

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

切换可访问性属性

role="document" 到 role="application"

【讨论】：

我已经将焦点与选择的文本框输入一起工作。所以如果我这样做，它应该解决模态使它停止工作的问题？

对不起，没有。在此澄清评论之后，您能否发布涉及 jQuery 模态的其余代码？

@texas697 可能还有其他代码导致焦点被劫持。如果没有其余代码，很难准确判断是什么阻止了焦点的发生。

我刚刚发布了其余的模式和打开它的javascript

【参考方案2】：

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

参考：

Bootstrap 为大多数插件的独特操作提供自定义事件。 通常，这些以不定式和过去分词形式出现- 其中不定式（例如 show）在事件开始时触发， 并且它的过去分词形式（例如所示）在 完成一个动作。

从 3.0.0 开始，所有 Bootstrap 事件都被命名空间。

所有不定式事件都提供 preventDefault 功能。这 提供在它之前停止执行操作的能力 开始。

代码：

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

【参考方案3】：

试试这个……在显示模式窗口中

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

在 UI 上……你需要在输入时有 ID……

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

【参考方案4】：

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

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