Доступ к кнопке поиска 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> 

С доступной точки зрения это решение имеет некоторые недостатки. В основном потому, что нажатие клавиши вкладок для перехода из поля в кнопку больше не работает. К сожалению, я не могу просто добавить 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>