在 JavaScript 中，在选择重置按钮后，如何将焦点设置在第一列？

huangapple
go评论95阅读模式
英文:

How do I set focus on first column after selecting Reset button in javascript?

问题

I am working on a page that needs to be accessible through keyboard. Everything works fine but I am not sure how to set focus on the Name column (first dropdown) after I hit Filter Results button? I tried the following code but it doesn't work -

  1. $(".dropdown1").focus();

Is there a way to set focus on span id? or what's the best way to achieve this? Thanks.

英文:

I am working on a page that needs to be accessible through keyboard. Everything works fine but I am not sure how to set focus on the Name column (first dropdwon) after I hit Filter Results button? I tired the following code but it doesn't work -

  1. $(".dropdown1").focus();

Is there a way to set focus on spanid? or what's the best way to achieve this? Thanks.

Here is the link to my code - https://live.datatables.net/datubino/10/edit

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. $(document).ready(function() {
  2.   var table = $(&#39;#example&#39;).DataTable({
  3.     responsive: true,
  4.     searching: true,
  5.     columnDefs: [{
  6.       target: 6,
  7.       visible: false,
  8.       searchable: true,
  9.     }],
  10.     dom: &#39;ilfrt&lt;&quot;left-col&quot;B&gt;&lt;&quot;toolbar&quot;&gt;&lt;&quot;right-col&quot;p&gt;&#39;,
  11.     fnInitComplete: function() {
  12.       $(&#39;div.toolbar&#39;).html(&#39;&lt;p&gt;Custom tool bar!&lt;/p&gt;&#39;);
  13.     },
  14.     buttons: [{
  15.         extend: &#39;excelHtml5&#39;,
  16.         className: &#39;mybutton&#39;,
  17.         exportOptions: {
  18.           columns: &#39;:visible&#39;
  19.         }
  20.       },
  21.      //  &#39;colvis&#39;
  22.     ],
  23.   });
  24.   buildSelect(table);
  25.   table.on(&#39;draw&#39;, function() {
  26.     buildSelect(table);
  27.   });
  29.   $(&#39;#myInput&#39;).on(&#39;keyup&#39;, function() {
  30.     table.search(this.value).draw();
  31.   });
  33.   $(&#39;#test&#39;).on(&#39;click&#39;, function() {
  34.     table.search(&#39;&#39;).columns().search(&#39;&#39;).draw();
  35.     $(&quot;.dropdown1&quot;).focus();
  36.   });
  37. });
  39. function buildSelect(table) {
  40.   var counter = 0;
  41.   table.columns([0, 1, 2]).every(function() {
  42.     var column = table.column(this, {
  43.       search: &#39;applied&#39;
  44.     });
  45.     counter++;
  46.     var select = $(&#39;&lt;select&gt;&lt;option value=&quot;&quot;&gt;select me&lt;/option&gt;&lt;/select&gt;&#39;)
  47.       .appendTo($(&#39;#dropdown&#39; + counter).empty())
  48.       .on(&#39;change&#39;, function() {
  49.         var val = $.fn.dataTable.util.escapeRegex(
  50.           $(this).val()
  51.         );
  53.         column
  54.           .search(val ? &#39;^&#39; + val + &#39;$&#39; : &#39;&#39;, true, false)
  55.           .draw();
  56.       });
  58.     if (column.index() === 0) {
  59.       var filteredNames = column.data().unique().toArray();
  60.       [&#39;Garrett&#39;, &#39;Test1&#39;, &#39;Ashton&#39;].forEach((d) =&gt; {
  61.         if (filteredNames.includes(d)) {
  62.           select.append(&#39;&lt;option value=&quot;&#39; + d + &#39;&quot;&gt;&#39; + d + &#39;&lt;/option&gt;&#39;);
  63.         }
  64.       });
  65.     } else {
  66.       column.data().unique().sort().each(function(d, j) {
  67.         select.append(&#39;&lt;option value=&quot;&#39; + d + &#39;&quot;&gt;&#39; + d + &#39;&lt;/option&gt;&#39;);
  68.       });
  69.     }
  71.     // The rebuild will clear the exisiting select, so it needs to be repopulated
  72.     var currSearch = column.search();
  73.     if (currSearch) {
  74.       // ** MY CHANGE **
  75.       // Use RegEx to find the selected value from the unique values of the column.
  76.       // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
  77.       select.val(column.data().unique().toArray().find((e) =&gt; e.match(new RegExp(currSearch))));
  78.     }
  79.   });
  80. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  4. &lt;head&gt;
  5.   &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css&quot; /&gt;
  6.   &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css&quot; /&gt;
  8.   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  9.   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js&quot;&gt;&lt;/script&gt;
  10.   &lt;script src=&quot;https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js&quot;&gt;&lt;/script&gt;
  11.   &lt;script src=&quot;https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js&quot;&gt;&lt;/script&gt;
  12.   &lt;script src=&quot;https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
  13.   &lt;script src=&quot;https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js&quot;&gt;&lt;/script&gt;
  14.   &lt;script src=&quot;https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js&quot;&gt;&lt;/script&gt;
  15.   &lt;script src=&quot;https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js&quot;&gt;&lt;/script&gt;
  16.   &lt;script src=&quot;https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js&quot;&gt;&lt;/script&gt;
  17.   &lt;meta charset=utf-8 /&gt;
  18.   &lt;title&gt;DataTables - JS Bin&lt;/title&gt;
  19. &lt;/head&gt;
  20. &lt;div class=&quot;searchbox&quot;&gt;
  21.   &lt;p&gt;Name:
  22.     &lt;span id=&quot;dropdown1&quot;&gt;
  23.   &lt;/span&gt;
  24.   &lt;/p&gt;
  25.   &lt;p&gt;Postion: &lt;span id=&quot;dropdown2&quot;&gt;
  26.   &lt;/span&gt;
  27.   &lt;/p&gt;
  28.   &lt;p&gt;Office: &lt;span id=&quot;dropdown3&quot;&gt;
  29. &lt;/span&gt;
  30.   &lt;/p&gt;
  31.   &lt;button type=&quot;button&quot; id=&quot;myInput&quot;&gt;Filter&lt;/button&gt;
  32.   &lt;button type=&quot;button&quot; id=&quot;test&quot;&gt;Reset&lt;/button&gt;
  33. &lt;/div&gt;
  34. &lt;table id=&quot;example&quot; class=&quot;cell-border row-border stripe dataTable no-footer dtr-inline&quot; role=&quot;grid&quot; style=&quot; width: 100%; padding-top: 10px;&quot;&gt;
  35.   &lt;thead&gt;
  36.     &lt;tr&gt;
  37.       &lt;th&gt;&amp;#160;&lt;/th&gt;
  38.       &lt;th&gt;&amp;#160;&lt;/th&gt;
  39.       &lt;th&gt;&amp;#160;&lt;/th&gt;
  40.       &lt;th colspan=&quot;3&quot; style=&quot; text-align: center;&quot;&gt;Information&lt;/th&gt;
  41.       &lt;th&gt;&amp;#160;&lt;/th&gt;
  42.     &lt;/tr&gt;
  43.     &lt;tr&gt;
  44.       &lt;th&gt;Name&lt;/th&gt;
  45.       &lt;th&gt;Position&lt;/th&gt;
  46.       &lt;th&gt;Office&lt;/th&gt;
  47.       &lt;th&gt;Age&lt;/th&gt;
  48.       &lt;th&gt;Start date&lt;/th&gt;
  49.       &lt;th&gt;Salary&lt;/th&gt;
  50.       &lt;th&gt;Hidden Column&lt;/th&gt;
  51.     &lt;/tr&gt;
  52.   &lt;/thead&gt;
  53.   &lt;tbody&gt;
  54.     &lt;tr&gt;
  55.       &lt;td&gt;Test1&lt;/td&gt;
  56.       &lt;td&gt;test&lt;/td&gt;
  57.       &lt;td&gt;test3&lt;/td&gt;
  58.       &lt;td&gt;test4&lt;/td&gt;
  59.       &lt;td&gt;2011/04/25&lt;/td&gt;
  60.       &lt;td&gt;$3,120&lt;/td&gt;
  61.       &lt;td&gt;Sys Architect&lt;/td&gt;
  62.     &lt;/tr&gt;
  63.     &lt;tr&gt;
  64.       &lt;td&gt;Garrett&lt;/td&gt;
  65.       &lt;td&gt;Director: fgghghjhjhjhkjkj&lt;/td&gt;
  66.       &lt;td&gt;Edinburgh&lt;/td&gt;
  67.       &lt;td&gt;63&lt;/td&gt;
  68.       &lt;td&gt;2011/07/25&lt;/td&gt;
  69.       &lt;td&gt;$5,300&lt;/td&gt;
  70.       &lt;td&gt;Director:&lt;/td&gt;
  71.     &lt;/tr&gt;
  72.     &lt;tr&gt;
  73.       &lt;td&gt;Ashton&lt;/td&gt;
  74.       &lt;td&gt;Technical Authorjkjkjk fdfd h gjjjhjhk&lt;/td&gt;
  75.       &lt;td&gt;San Francisco&lt;/td&gt;
  76.       &lt;td&gt;66&lt;/td&gt;
  77.       &lt;td&gt;2009/01/12&lt;/td&gt;
  78.       &lt;td&gt;$4,800&lt;/td&gt;
  79.       &lt;td&gt;Tech author&lt;/td&gt;
  80.     &lt;/tr&gt;
  81.     &lt;/tr&gt;
  82.   &lt;/tbody&gt;
  83. &lt;/table&gt;
  84. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

使用#代替.来定位一个ID，并使用子组合器(&gt;)来获取&lt;span&gt;内部的&lt;select&gt;元素。

  1. $(&quot;#dropdown1 &gt; select&quot;).focus();
英文:

Use # instead of . to target an id and use the child combinator (&gt;) to get the &lt;select&gt; element inside that &lt;span&gt;.

  1. $(&quot;#dropdown1 &gt; select&quot;).focus();

huangapple
  • 本文由 发表于 2023年6月13日 06:28:32
  • 转载请务必保留本文链接：https://go.coder-hub.com/76460688.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定