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（目前有限的浏览器支持）。由于可以通过按“返回”提交输入字段，我可以在按钮上添加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>

搜索按钮tabindex可访问性

1 个答案: