Сделать элемент HTML не фокусируемым

Question

Можно ли сделать элемент HTML не фокусируемым ?

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

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

Answer 1

<a href="http://foo.bar" tabIndex="-1">unfocusable</a>

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

https://developer.mozilla.org/nl/docs/Web/HTML/Global_attributes/tabindex

Answer 2

Чтобы полностью предотвратить фокусировку, не только при использовании кнопки tab , установите disabled в качестве атрибута в вашем HTML-элементе.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<input class="form-control" type="text"> Click this, you can see it's focusable.

<input class="form-control" type="text" readonly>  Click this, you can see it's focusable.

<input class="form-control" type="text" readonly tabindex="-1">  Click this, you can see it's focusable. Not tab'able.

<input class="form-control" type="text" disabled>  Click this, you can see it's <strong>not</strong> focusable.

Answer 3

TabIndex - это то, что вы ищете: http://www.w3schools.com/jsref/prop_html_tabindex.asp.

Когда вы установите значение tabIndex равным -1, оно будет пропущено при переходе через форму.

Answer 4

Чтобы предотвратить фокусировку элемента («не фокусируемый»), вам нужно использовать Javascript для отслеживания focus и предотвращения взаимодействия по умолчанию.

Чтобы предотвратить вкладку элемента, используйте атрибут tabindex=-1.

Добавление tabindex=-1 сделает любой элемент фокусируемым, даже div элементов. Это означает, что когда пользователь нажимает на него, он, вероятно, получит контур фокуса, в зависимости от браузера.

В идеале вы бы хотели:

function preventFocus(event) {
  event.preventDefault();
  if (event.relatedTarget) {
    // Revert focus back to previous blurring element
    event.relatedTarget.focus();
  } else {
    // No previous focus target, blur instead
    event.currentTarget.blur();
  }
}

/* ... */

element.setAttribute('tabindex', '-1');
element.addEventListener('focus', preventFocus);

Answer 5

Я использовал focusable = "false", потому что tabindex = "- 1" в IE не работал

Answer 6

Для элемента, который вы не хотите фокусировать на вкладке, вы должны поставить tabindex как отрицательное значение.

Answer 7

Сделать элемент HTML с возможностью фокусировки по умолчанию и без него невозможно без JavaScript.

После погружения в DOM-события, связанные с фокусом, я придумал следующую реализацию (на основе ответа @ ShortFuse , но исправил некоторые проблемы и крайние случаи):

    // A focus event handler to prevent focusing an element it attached to
    onFocus(event: FocusEvent): void {
        event.preventDefault();

        // Try to remove the focus from this element.
        // This is important to always perform, since just focusing the previously focused element won't work in Edge/FF, if that element is unable to actually get the focus back (became invisible, etc.): the focus would stay on the current element in such a case
        const currentTarget: any | null = event.currentTarget;
        if (currentTarget !== null && isFunction(currentTarget.blur))
            currentTarget.blur();

        // Try to set focus back to the previous element
        const relatedTarget: any | null = event.relatedTarget;
        if (relatedTarget !== null && isFunction(relatedTarget.focus))
            relatedTarget.focus();
    }

   // Not the best implementation, but works for the majority of the real-world cases
    export function isFunction(value: any): value is Function {
        return value instanceof Function;
    }

Это реализовано в TypeScript, но его можно легко настроить для простого JavaScript.

Answer 8

Я просто читал исходный код YouTube, я вижу focusable = "false"

<svg xmlns="https://www.w3.org/2000/svg" focusable="false" aria-label="" fill="#4285F4" viewBox="0 0 24 24" height="24" width="24" style="margin-left: 4px; margin-top: 4px;"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>

Это более правильный ответ?