Вкладка (клавиатура) навигации на странице, содержащей iframe

У меня есть страница с iframe. IFrame содержит элементы ввода. Когда пользователь помещает курсор в первое текстовое поле ввода в iframe и нажимает клавишу табуляции, фокус выпрыгивает из iframe, а следующий элемент на родительском странице получает фокус. (вместо этого остался в iframe и место для фокусировки на втором входном элементе.)Вкладка (клавиатура) навигации на странице, содержащей iframe

Я попытался поместить атрибут tabIndex для входных элементов без эффекта.

Я хотел бы убедиться, что входные элементы в iframe можно получить, нажав клавишу Tab.

* Начинают Редактировать Рискуя минусы, но я должен высказать свое мнение ... я узнал ответ на этот вопрос будет это не obvious.Regarding последствия UX такого поведения: Проводы браузеров и HTML/css у нас все еще есть эти белые дыры, которые телепортируют нас к каменному возрасту UI/IX: 80-е и 90-е годы ... Просто поместите себя в ситуацию конечного пользователя, который пытается перемещаться между элементами пользовательского интерфейса, используя ключ таблеток ... Конец Редактировать *

... sor ry, если кто-то чувствовал себя обиженным, потому что для этого не существует очевидного ответа в эпоху HTML 6 + ... Я думаю, вместо этого мы должны решить или обходиться с этим, чтобы обеспечить enduser UX .... или это не воспроизводится? Пожалуйста, дайте мне знать, если я что-то пропустил.

источник

2015-04-16 g.pickardou

Я не думаю, что вы можете это сделать (я надеюсь, что я ошибаюсь), так как вы не можете контролировать то, что находится внутри iframe. С вкладкой вы просто взаимодействуете между вашими элементами (ваш html). В любом случае, я буду следить за вопросом, поскольку это может быть приятно, если Im wrong –

@Alvaro Menéndez: Я не могу поверить, что невозможно перемещаться внутри iframe с вкладкой. Я не хочу ничего менять по «нормальному» поведению: –

Что такое _parent page_? Это тоже ваше? – putvande

Пожалуйста, рассмотрите этот простой пример, который противоречит вашим требованиям. Вкладка работает правильно, перемещаясь по элементам формы как дочернего кадра, так и родительского кадра.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Outer Frame</title> 
    <style> 
     .iframe-wrapper { 
      height: 80px; 
     } 
    </style> 
</head> 
<body> 
    <div class="iframe-wrapper"> 
     <iframe id="myInnerFrame" src="./inner-frame.html" frameborder="0" width="100%" height="100%"></iframe> 
    </div> 
    <input type="button" value="No, press me!"> 
</body> 
</html>

И inner-frame.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Inner Frame</title> 
    <style> 
     .wrapper { 
      border: 2px solid #f0f0f0; 
     } 
    </style> 
</head> 
<body> 
    <div class="wrapper"> 
     <div>Hello, world. I am iframe.</div> 
     <input type="text" name="" id="" value="Write in me"> 
     <input type="button" value="Press me"> 
    </div> 
</body> 
</html>

Проверено на Windows, с Chrome, Firefox и IE - все последние версии.

Я также сделал скрипку JS, чтобы продемонстрировать ее. Но по какой-то причине для iframe для рендеринга вам нужно нажать Run сначала. http://jsfiddle.net/gjng7dgg/4/

источник

2015-04-16 15:57:00 Olga

Спасибо за эту демонстрацию. Теперь я пытаюсь изолировать и воспроизвести свой случай, когда навигация на вкладке определенно не работает, вместо этого работает так, как я описал в своем вопросе. Однако это довольно сложная страница с бутстрапом, jquery и некоторыми плагинами ... –

@g.pickardou это всегда есть. Удачи вам и пожелайте, чтобы вы ее разрешили. – Olga

Вкладка (клавиатура) навигации на странице, содержащей iframe

ответ

Смежные вопросы