搜索按钮 tabindex 可访问性

Question

我需要在同一行放置一个输入字段和提交按钮。输入字段应为剩余宽度的 100%。我发现实现类似跨浏览器的唯一方法是described here：

<form action="search.php" method="get">
  <input type="submit" name="search" value="Go" style="float: right" />
  <div style="overflow: hidden; padding-right: .5em;">
    <input type="text" name="term" style="width: 100%;" />
   </div>
</form>

从易于理解的角度来看，此解决方案有一些缺点。主要是因为按 Tab 键从字段移动到按钮不再起作用。不幸的是，我不能只将tabindex="1" 添加到该字段并将tabindex="2" 添加到按钮，因为这会破坏整个页面的“自然标签顺序”。

所以我想知道是否有任何其他方法可以解决这个问题而不必使用flexbox（目前浏览器支持有限）。由于可以通过按“return”提交输入字段，因此我可以在按钮上添加一个 tabindex="-1" 。但是那个doesn't seem to be a great solution 要么...

Answer 1

我没有进行跨浏览器测试，但你可以试试这个：

http://jsfiddle.net/n5ne3L1f/

<form action="search.php" method="get" style='display:table; width:100%;'>
   <div style="display:table-cell; width: 100%;">
       <input type="text" name="term" style="width: 100%;" />
   </div>
   <input type="submit" name="search" value="Go" style="display:table-cell;" />
</form>