Товаров: 0 (0р.)

Tabindex css: tabindex — HTML | MDN

Содержание

Атрибут tabindex — порядок получения фокуса

Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.

Нажимая эту клавишу можно активировать последовательно некоторые элементы страницы (ссылки и элементы форм). Активные элементы будут получать фокус ввода.

Для полей ввода типа input и textarea фокус будет выражаться в том, что в поле будет моргать курсор и в него можно будет вводить текст, для ссылок и других элементов это будет выделение каким-то образом (подчеркивание, обведение пунктирной границей и т.п., зависит от браузера).

Чтобы поменять стили по умолчанию для элемента в фокусе смотрите псевдокласс focus.

Если в момент получения фокуса элемент не был виден на странице (из-за прокрутки), то страница прокрутится к этому элементу.

Если элементам не задан атрибут tabindex или он имеет значение 0, то переход по ним клавишей Tab будет идти в порядке следования элементов в HTML коде.

Если на странице есть элементы, которым задан tabindex, то вначале переход будет идти по ним, начиная от меньшего значения атрибута tabindex (самым маленьким может быть единица) и так далее по возрастанию значений атрибута, а когда такие элементы закончатся — переход пойдет по тем элементам, которым не задан tabindex или он имеет значение 0.

Значением атрибута служат целые числа от 1 до бесконечности. Если какие-то номера пропущены — ничего страшного не случится (к примеру, если нет номера 2, то сначала фокус попадет на элемент с tabindex

, равным 1, а потом на элемент с tabindex, равным 3).

Если на странице в момент нажатия клавиши Tab есть элемент в фокусе (фокус мог быть получен не только нажатием Tab, но и кликом мышкой по элементу или атрибутом autofocus), то следующее нажатие клавиши Tab приведет к тому, что фокус получит следующий по порядку элемент после того, который в фокусе (к примеру, если сейчас в фокусе элемент с tabindex 3, то следующим получит фокус элемент с tabindex 4).

Если полю ввода задан атрибут disabled, то оно будет проигнорировано переходами через клавишу Tab, даже если этому полю задан атрибут

tabindex.

Атрибут tabindex применяется к тегам a, input, textarea, button, select, area.

Пример

Давайте инпутам зададим атрибут tabindex. Понажимайте последовательно клавишу Tab и вы увидите, как фокус ввода будет переходить от первого инпута к четвертому, а потом пойдет по ссылкам с начала страницы (так как больше элементов с заданным атрибутом tabindex нет):

<input type="text" tabindex="3" placeholder="Номер элемента: 3"> <input type="text" tabindex="1" placeholder="Номер элемента: 1"> <input type="text" tabindex="2" placeholder="Номер элемента: 2"> <input type="text" tabindex="4" placeholder="Номер элемента: 4">

:

HTML атрибут tabindex | назначение, значения, примеры

Атрибут tabindex — определяет позицию элемента в порядке табуляции в текущем документе.

Возможные значения: целое число в диапазоне от 0 до 32767.

Элементы, поддерживающие атрибут tabindex, и имеющие для него положительное значение, перебираются в первую очередь.

Элементы, не поддерживающие атрибут tabindex или поддерживающие его и устанавливающие значение «0», считаются текстом. Эти элементы перебираются в порядке, в котором они следуют в потоке символов.

Тип значенияNUMBER
Значение по умолчаниюНет
Применим к:
Аналог в CSSнет

Пример

<input tabindex="1" type="text" name="field1">

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— —> </style> </head> <body> <FORM action=»…» method=»post»> <div> <INPUT tabindex=»1″ type=»text» name=»field1″> <INPUT tabindex=»2″ type=»text» name=»field2″> <INPUT tabindex=»3″ type=»submit» name=»submit»> </div> </FORM> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

Возможно применение этого атрибута также для следующих тегов:

abbr, acronym, address, applet, b, bdo, big, blink, blockquote, body, br, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h2-h6, hr, html, i, iframe, img, ins, isindex, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes,ol, optgroup, option, p, plaintext, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, wbr, xmp.

Такое применение не соответствует спецификации HTML 4.01, но поддерживается Internet Explorer, Firefox, Opera, Chrome и не поддерживается Safari.

Элементы DOM – React

React реализует независимую от браузера систему DOM для повышения производительности и кроссбраузерной совместимости. Это позволило избавиться от некоторых шероховатостей в браузерных реализациях DOM.

В React все свойства и атрибуты DOM (включая обработчики событий) должны быть в стиле camelCase. Например, HTML-атрибут tabindex соответствует атрибуту tabIndex в React. Исключение составляют атрибуты aria-* и 

data-*, которые следует писать в нижнем регистре. В частности, вы можете оставить aria-label как aria-label.

Различия в атрибутах

Есть ряд атрибутов, которые по-разному работают в React и HTML:

checked

Атрибут checked поддерживается компонентами <input> типа checkbox или radio. Он нужен для того, чтобы узнать выбран ли компонент. Это полезно для создания управляемых компонентов. defaultChecked — это неуправляемый эквивалент, который определяет, выбран ли компонент на момент первого монтирования.

className

Чтобы указать класс CSS, используйте атрибут className

. Это относится ко всем обычным элементам DOM и SVG, таким как <div>, <a> и т. д.

Если вы используете React с веб-компонентами (что встречается редко), используйте вместо этого атрибут class.

dangerouslySetInnerHTML

Свойству innerHTML в DOM браузера соответствует dangerouslySetInnerHTML в React. Как правило, вставка HTML из кода рискованна, так как можно случайно подвергнуть ваших пользователей атаке межсайтового скриптинга. Таким образом, вы можете вставить HTML непосредственно из React используя dangerouslySetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это небезопасно. Например:

function createMarkup() {
  return {__html: 'Первый &middot; Второй'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

htmlFor

Поскольку for является зарезервированным словом JavaScript, для определения HTML-атрибута for в элементах React вместо него используйте htmlFor.

onChange

Событие onChange ведёт себя ожидаемо: событие срабатывает при изменении поля формы. Мы намеренно не используем существующее поведение браузера, потому что имя onChange плохо передаёт, что происходит на самом деле. Вместо этого, React-реализация onChange опирается на браузерное событие для обработки ввода в реальном времени.

selected

Если вы хотите отметить некоторый пункт списка <option> выделенным, задайте его значение в атрибуте value тега <select>. Изучите «Тег select» для получения подробных инструкций.

style

Примечание

Некоторые примеры в документации используют для удобства style, но использование атрибута style для оформления элементов не рекомендуется. В большинстве случаев для ссылки на классы, определённые во внешнем CSS, следует использовать className. Атрибут style в React чаще всего используется при добавлении динамически вычисляемых стилей во время рендера. Смотрите FAQ: Стилизация и CSS.

Атрибут style принимает JavaScript-объект со свойствами в camelCase вместо CSS-строк. Такой подход повышает эффективность и защищает от XSS. Например:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Привет, мир!</div>;
}

Обратите внимание, что браузерные префиксы не добавляются к стилям автоматически. Для поддержки старых браузеров необходимо добавить соответствующие свойства стиля:

const divStyle = {
  WebkitTransition: 'all', 
  msTransition: 'all' 
};

function ComponentWithTransition() {
  return <div style={divStyle}>Это будет работать в разных браузерах</div>;
}

Ключи стилей записываются в camelCase для обеспечения доступа к аналогичным свойствам DOM из JS (например, node.style.backgroundImage). Префиксы браузера кроме ms должны начинаться с заглавной буквы. Вот почему WebkitTransition начинается с заглавной «W».

React автоматически добавит суффикс «px» к свойствам стилей с числовым значением. Если вы хотите использовать единицы измерения, отличные от «px», укажите значение в виде строки с желаемой единицей измерения. Например:


<div style={{ height: 10 }}>
  Привет, мир!
</div>


<div style={{ height: '10%' }}>
  Привет, мир!
</div>

Однако не все свойства стилей преобразуются в пиксельные строки. Некоторые из них остаются без единиц (например, zoom, order, flex). Полный список свойств без единиц измерения можно увидеть здесь.

suppressContentEditableWarning

Обычно, когда элемент с потомками помечен как contentEditable, появляется предупреждение, что он не будет работать. Данный атрибут скрывает это предупреждение. Поэтому используйте его, только если вы создаёте похожую на Draft.js библиотеку, которая управляет contentEditable вручную.

suppressHydrationWarning

Если вы используете рендеринг React на стороне сервера и клиент с сервером рендерят разный контент, то как правило, об этом выдаётся предупреждение. Однако в редких случаях очень сложно или невозможно гарантировать точное совпадение. Например, ожидается, что временные метки будут различаться на сервере и на клиенте.

Если для suppressHydrationWarning установлено значение true, React не будет предупреждать вас о несоответствиях в атрибутах и содержимом этого элемента. Он работает только на один уровень глубины и предназначен для использования в качестве запасного решения. Не злоупотребляйте этим. Вы можете прочитать больше о гидратации на странице ReactDOM.hydrate().

value

Атрибут value поддерживается компонентами <input>, <select> и <textarea>. Он устанавливает значение компонента. Это полезно для создания управляемых компонентов. defaultValue — это неуправляемый эквивалент, который устанавливает значение компонента во время первого монтирования.

Поддержка всех HTML-атрибутов

Начиная с React 16, полностью поддерживаются любые стандартные или пользовательские атрибуты DOM.

React всегда предоставлял JavaScript-ориентированный API для DOM. Поскольку компоненты React часто принимают как пользовательские, так и связанные с DOM пропсы, React использует стиль camelCase так же, как DOM API:

<div tabIndex={-1} />      
<div className="Button" /> 
<input readOnly={true} />

Эти пропсы работают аналогично соответствующим атрибутам HTML, за исключением особых случаев, описанных выше.

Некоторые из атрибутов DOM, поддерживаемые React:

accept acceptCharset accessKey action allowFullScreen alt async autoComplete
autoFocus autoPlay capture cellPadding cellSpacing challenge charSet checked
cite classID className colSpan cols content contentEditable contextMenu controls
controlsList coords crossOrigin data dateTime default defer dir disabled
download draggable encType form formAction formEncType formMethod formNoValidate
formTarget frameBorder headers height hidden high href hrefLang htmlFor
httpEquiv icon id inputMode integrity is keyParams keyType kind label lang list
loop low manifest marginHeight marginWidth max maxLength media mediaGroup method
min minLength multiple muted name noValidate nonce open optimum pattern
placeholder poster preload profile radioGroup readOnly rel required reversed
role rowSpan rows sandbox scope scoped scrolling seamless selected shape size
sizes span spellCheck src srcDoc srcLang srcSet start step style summary
tabIndex target title type useMap value width wmode wrap

Кроме того, полностью поддерживаются все SVG-атрибуты:

accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
clip clipPath clipPathUnits clipRule colorInterpolation
colorInterpolationFilters colorProfile colorRendering contentScriptType
contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
end exponent externalResourcesRequired fill fillOpacity fillRule filter
filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
limitingConeAngle local markerEnd markerHeight markerMid markerStart
markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
numOctaves offset opacity operator order orient orientation origin overflow
overlinePosition overlineThickness paintOrder panose1 pathLength
patternContentUnits patternTransform patternUnits pointerEvents points
pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
spacing specularConstant specularExponent speed spreadMethod startOffset
stdDeviation stemh stemv stitchTiles stopColor stopOpacity
strikethroughPosition strikethroughThickness string stroke strokeDasharray
strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
textDecoration textLength textRendering to transform u1 u2 underlinePosition
underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan

Вы также можете использовать пользовательские атрибуты, если они написаны в нижнем регистре.

Использование атрибута HTML tabindex и псевдокласса CSS :focus

Если вы интересуетесь обеспечением доступности веб-сайта, вам, вероятно, знакомы эти возможности. Но мы не очень много пишем об обеспечении доступности веб-сайта, хотя эта тема тоже важна. Представим, что у нас есть следующая страница с различными элементами, начинающаяся, например, с поля ввода:

 

 

Если сначала поле ввода поискового запроса в фокусе, затем используется табуляция для перемещения по элементам, то фокус переходит от поля ввода поискового запроса на первую ссылку, перескакивая через заголовок и текст, затем на вторую ссылку и так далее. Чтобы было ясно видно, что находится в фокусе, с помощью псевдокласса фокус добавлен цвет фона.

Но что делать, если необходимо, чтобы все элементы страницы могли оказаться в фокусе? Нужно добавить атрибут HTML tabindex в код HTML тому элементу, который должен оказываться в фокусе:

Теперь при использовании табуляции для перемещения по элементам все элементы будут оказываться в фокусе и выделяться цветом фона, в том числе все текстовые элементы.

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

Это значит, что можно создать что-то наподобие следующего примера. Это игра на чистом CSS под названием «Найдите котенка»:

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

Если использовать воображение и другие свойства CSS, можно создать другие интересные эффекты.

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

Надеемся, этот способ использования атрибута HTML tabindex и псевдокласса CSS фокус показался Вам интересным, хотя он, как мы уже отмечали, вероятно, уже знаком опытным разработчикам.

Автор урока Louis Lazaris

Перевод — Дежурка

Смотрите также:

 

html — Как использовать tabindex для элемента с непрозрачностью, установленной на 0

У меня есть поле загрузки изображения перетаскиванием, в котором я установил для поля ввода значение непрозрачности 0, поэтому кнопка загрузки не отображается, поэтому я могу стилизовать ее в соответствии с макетом. Однако я пытаюсь решить проблемы с доступностью, заставляя запускать функцию загрузки, когда пользователь нажимает клавишу ВВОД.

Проблема, с которой я столкнулся, заключается в том, что, поскольку непрозрачность установлена ​​на 0, когда я нажимаю на нее, она не фокусирует элемент. Я все еще могу нажать клавишу ВВОД, чтобы загрузить файл, и это работает нормально, но нет индикатора, чтобы пользователь знал, что эта опция для них есть.

Есть хороший способ исправить это?

Вот небольшой пример того, что я делаю:

HTML:

<div>
    <input type="file" accept="image/*">
    <p> Drop your photo here or upload a file</p>
</div>

CSS:

.imageUploader {
    width: 120px;
    height: 122px;
    background-color: #F4F6FC;
    display: inline-block;
    border-radius: 100px;
    vertical-align: bottom;
    text-align: center;
    position: relative;
}
.image {
    opacity:0;
    width: 100%
    height: 120px;
    cursor: pointer;
    position: absolute;
    left: 0;
} 

.text {
    position: absolute;
    top: 30%;
    font-size: 14px;
}

1

Ethan Franson 14 Апр 2020 в 20:57

1 ответ

Лучший ответ

Это должно позволить вам щелкнуть настраиваемый кружок с текстом, чтобы открыть ввод файла. Он также позволяет вам переходить к нему, и отображается визуальная подсказка, указывающая, что элемент сфокусирован.

.imageUploader {
    width: 120px;
    height: 122px;
    background-color: #F4F6FC;
    border-radius: 100px;
    text-align: center;
    font-size: 14px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
}

.upload {
  opacity: 0;
  position: absolute;
  width: 122px;
  height: 122px;
  border-radius: 100px;
}

.upload:focus + .imageUploader {
     border:1px solid #4D90FE;
}
<div>
    <input type="file" accept="image/*">
    <label for="inputID">Drop your photo here or upload a file</label>
</div>

2

Max Jacobson 15 Апр 2020 в 15:12

tabindex — HTML: HyperText Markup Language

Глобальный атрибут tabindex указывает, что его элемент может быть сфокусирован, и где он участвует в последовательной навигации с клавиатуры (обычно с помощью клавиши Tab , отсюда и название).

Он принимает целое число в качестве значения с разными результатами в зависимости от целочисленного значения:

  • Отрицательное значение (обычно tabindex = "- 1" ) означает, что элемент недоступен с помощью последовательной навигации с клавиатуры, но его можно сфокусировать с помощью JavaScript или визуально, щелкнув мышью.Чаще всего полезно создавать доступные виджеты с помощью JavaScript.

    Примечание: Отрицательное значение полезно, когда у вас есть закадровый контент, который появляется при определенном событии. Пользователь не сможет сфокусировать какой-либо элемент с отрицательным tabindex с помощью клавиатуры, но сценарий может сделать это, вызвав метод focus () .

  • tabindex = "0" означает, что элемент должен быть доступен для фокусировки при последовательной навигации с клавиатуры после любых положительных значений tabindex и его порядок определяется исходным порядком документа.
  • Положительное значение . означает, что элемент должен быть доступен для фокусировки при последовательной навигации с клавиатуры, а его порядок определяется значением числа. То есть tabindex = "4" фокусируется до tabindex = "5" и tabindex = "0" , но после tabindex = "3" . Если несколько элементов имеют одно и то же положительное значение tabindex , их порядок относительно друг друга следует за их положением в источнике документа. Максимальное значение для tabindex — 32767.Если не указан, принимает значение по умолчанию 0.

    Предупреждение: Избегайте использования tabindex значений больше 0. Это затрудняет навигацию и управление содержимым страницы для людей, которые полагаются на вспомогательные технологии. Вместо этого напишите документ с элементами в логической последовательности.

Если вы установите атрибут tabindex для

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

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

для описания кнопки вместо элемента