页面首次加载后DataTables搜索框无法自动获取焦点求助

我用DataTables结合Bootstrap开发页面，希望页面加载完成后搜索框自动获取焦点，方便直接输入内容。但首次加载页面时该效果不生效，只有刷新页面后搜索框才能获得焦点。

使用的库文件 #

<!-- // required CSS references -->
<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/cr-1.6.1/fh-3.3.1/sp-2.1.0/datatables.min.css" />

<!-- // required library references     -->
<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript"
    src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/cr-1.6.1/fh-3.3.1/sp-2.1.0/datatables.min.js"></script>

尝试过的解决方案 #

• 方案1：

$(document).ready(function () {$(".dataTables_filter input[type='search']").attr("placeholder", "Type here").focus();}); 

• 方案2：

initComplete: function ()
{$(".dataTables_filter input").attr("placeholder", "Search here...").css(
{width: "300px", display: "inline-block"}).focus();}});

• 方案3：

$('#dtable_filter input').focus()$(window).on('focus', function ({$('#dtable_filter input')

环境说明 #

• 浏览器：64位最新版Chrome
• 问题复现场景：VSCode调试器、FileMaker的Webviewer中可复现；直接打开HTML文件时功能正常

完整代码示例 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Contacts Introduction</title>

    <!-- // required CSS references -->

    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/cr-1.6.1/fh-3.3.1/sp-2.1.0/datatables.min.css" />

    <!-- // required library references     -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/cr-1.6.1/fh-3.3.1/sp-2.1.0/datatables.min.js"></script>


</head>

<!------------------------------- BEGIN STYLE  ------------------------>

<style>
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: "Roboto", sans-serif;
        font-size: 9pt;
        padding: 0;
        width: 98.5vw;
    }

    .dataTables_wrapper {
        padding: .8em;
        overflow-x: hidden;
    }

    .dataTables_wrapper>div>div.dataTables_filter {
        display: flex;
        float: right;

    }

    .dataTables_wrapper>div>div.dataTables_length {
        display: flex;
        float: left;
        margin: 0 0 1em 0;
        margin-bottom: 1em;
        width: 50%;
    }


    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        justify-content: flex-end;
    }

    myTable {
        width: 99%;
    }

    .dataTables_info {
        background-color: gainsboro;
        clear: both;
        margin: 0 0 1em 0;
        padding: 0.5rem 1rem;
        border-bottom: gainsboro;
    }

    th {
        font-size: x-small;
        padding: 0.5rem 1.2rem 0.5rem 0.5rem !important;
        vertical-align: middle;
    }

    th>select {
        display: none;
    }


    th.sorting.sorting_asc {
        font-size: 10pt;
    }

    th.sorting.sorting_desc {
        font-size: 10pt;
    }


    th.sorting::before,
    th.sorting::after {
        display: none !important;

    }

    th.sorting[aria-sort="ascending"]::before,
    th.sorting[aria-sort="ascending"]::after,
    th.sorting[aria-sort="descending"]::before,
    th.sorting[aria-sort="descending"]::after {
        display: block !important;

    }

    th>td {
        padding: 0.5rem !important;

    }

    tbody>tr>td {
        border-bottom-width: 0 !important;
        border-right-width: 0 !important;
        padding: 0.5rem !important;
    }

    tbody>tr>td:last-of-type {
        border-right-width: 1px !important;
    }

    table.dataTable.no-footer {
        border-bottom: 1px solid gainsboro;
    }
</style>

<!-------------------------------- END STYLE  -------------------------->



<!-------------------------------- BEGIN BODY  ------------------------>

<body>

    <table id="dtable" class="table table-striped table-bordered table-sm" width="100%">
    </table>
    <script>

        let myTable;

        const data = [
            { "Company_Name": "Company1", "ID": "411A3531-0077-4706-9017-FB156D1DB841" },
            { "Company_Name": "Company11", "ID": "145698D4-C3B9-4368-B599-765D31ADD772" },
            { "Company_Name": "Company111", "ID": "2BEFAA4B-917A-4487-8B37-A9C3A398D3CB" },
            { "Company_Name": "Company11111 ", "ID": "AF41267E-5565-4F0F-9081-1665DAD88E58" },
            { "Company_Name": "Company111111.", "ID": "3AA9DD53-508A-4887-8579-D5FE4F53A9B1" },
            { "Company_Name": "Company111111111", "ID": "257DA4AA-30FA-4517-AC61-8B3DA5AAD88F" }
        ];

        const columns = [
            {
                "data": "Company_Name",
                "orderable": true,
                "searchable": true,
                "title": "COMPANY NAME",
                "visible": true
            }
        ];


        myTable = $("#dtable").DataTable({
            columns,
            data,
            searching: true,
            lengthMenu: [[15, 20, 50, 100, -1], [15, 20, 50, 100, "All"]],
            pageLength: 15,
            fixedHeader: true,
            lengthChange: true,
            dom: "<fli> <t> <rp>",
        });


        $("#dtable").on("click", "td", function () {
            const columns = myTable.settings().init().columns;
            const cell = myTable.cell(this).data();
            const obj = myTable.row(this).data();
            const colIndex = myTable.cell(this).index().column;
            const field = columns[colIndex].data;
            const obj2 = JSON.stringify(obj);

        });
        $(document).ready(function () {
            $(".dataTables_filter input[type='search']")
                .attr("placeholder", "Type here")
                .focus();
        });

    </script>


</body>


</html>

请求解决建议 #

以上方案在页面首次加载时均无效，恳请提供可行的解决办法。

内容的提问来源于stack exchange，提问作者Mark-IT