提问人：Mark-IT 提问时间：10/24/2023 最后编辑：Mark-IT 更新时间：10/24/2023 访问量：45
DataTable - 首次加载页面后搜索字段中的焦点丢失
DataTables - focus in search field missing after loading page for first time
问：
使用 DataTable 和 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>
我确实试过：
$(document).ready(function () {$(".dataTables_filter input[type='search']").attr("placeholder", "Type here").focus();});
或
initComplete: function ()
{$(".dataTables_filter input").attr("placeholder", "Search here...").css(
{width: "300px", display: "inline-block"}).focus();}});
或
$('#dtable_filter input').focus()$(window).on('focus', function ({$('#dtable_filter input')
但是这些都不是通过页面加载工作的，我必须刷新加载的页面，以便输入搜索字段处于活动/聚焦状态，这样我就可以开始输入了。我使用的是最新版本的 Chrome 64 位。
*更新：当我在 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>答： 暂无答案
评论
$(document).ready(function ()initComplete