Настройка атрибута автофокуса HTML5 с помощью CSS

Question

У меня есть веб-сайт с одним полем ввода (например, поисковой системой), и я использую атрибут HTML5 autofocus.

Но на очень малых размерах экрана мягкая клавиатура, которая появляется на многих устройствах, скрывает слишком большую часть экрана.

Возможно ли присвоить атрибут автофокуса в запросе на медиа-носитель CSS, поэтому он активен только на больших дисплеях?

Я знаю, что могу настроить фокус с помощью Javascript, но прямо сейчас страницы не используют Javascript, и я бы предпочел избежать его, если бы его можно было использовать для этого CSS.

Answer 1

Как указано выше в комментариях: Используйте два входа и сделайте один скрытый (display:none;). Затем с целевыми экранами правил @media, которые имеют максимальную ширину 480px и сделают скрытый вход видимым (display:block;) и спрятать другой.

CSS:

.smscreen { 
    display: none; 
} 

@media screen and (max-width: 480px) { 
    .lgscreen { 
    display: none; 
    } 

    .smscreen { 
    display: block; 
    } 

} 

См Example using CSS.

---

В противном случае, вы можете обнаружить размер окна с JQuery на странице загрузки, и если экран больше, чем 480px использовать .focus() функцию на входе.

См. Example using jQuery.