Как заставить кнопки не брать фокус? - PullRequest
Новая
       25

Как заставить кнопки не брать фокус?

20 голосов
/ 11 июня 2009

Я хочу, чтобы мои (ExtJS) кнопки панели инструментов не захватывали фокус на веб-странице при их нажатии, но делали свое "дело", оставляя фокус неизменным при щелчке. Как мне это сделать?

Ответы [ 8 ]

32 голосов
/ 20 июня 2015

Отмена поведения по умолчанию onmousedown не позволяет элементу получить фокус: 

// Prevent capturing focus by the button.
$('button').on('mousedown', 
    /** @param {!jQuery.Event} event */ 
    function(event) {
        event.preventDefault();
    }
);
6 голосов
/ 12 июня 2009

document.activeElement хранит текущий фокусированный элемент.

Итак, на вашей панели инструментов вы можете добавить обработчик mousedown к этой функции: 

function preventFocus() {
  var ae = document.activeElement;
  setTimeout(function() { ae.focus() }, 1);
}

Попробуйте этот пример: 

<html>
<head>
<script>
function preventFocus() {
  var ae = document.activeElement;
    setTimeout(function() { ae.focus() }, 1);
}
</script>
</head>
<body>
<input type="text"/>
<input type="button" onmousedown="preventFocus()" onclick="alert('clicked')" value="Toolbar" />
</body>
</html>
3 голосов
/ 12 июня 2009

Я не думаю, что есть простой способ сделать то, что вы хотите сделать, потому что это поведение браузера по умолчанию.

Конечно, вы можете размыть () кнопку, как только она будет нажата, но это просто отменит выбор всего. Чтобы ранее активный объект восстановил фокусировку, вам нужно создать своего рода «память», добавив обработчик размытия для каждого элемента, чтобы отслеживать, какой элемент имел / потерял фокус последним (сохранить идентификатор элемента в глобальном и обновлять его, когда элемент теряет фокус).

0 голосов
/ 17 сентября 2018

Это обычно помогает мне: 

<button 
  tabindex="-1"
  onclick="javascript:console.log('do your thing')"
>My Button</button>

С https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex:

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

0 голосов
/ 15 мая 2017 
<script>
    function focusor(){
        document.getElementById('focus').focus;
    }
    document.onkeydown = focusor;
    document.onclick = focusor;
</script>
<div style="width: 0px; height: 0px; overflow: hiddden;">
    <button id="focus"></button>
</div>

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

[не заставляйте div показывать ничего, некоторые браузеры просто игнорируют его]

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

Вроде измученный, но это работает.

0 голосов
/ 16 июня 2009

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

Тогда все кнопки панели инструментов должны получить один слушатель события фокуса. Этот слушатель должен сфокусировать поле, которое было сохранено, как описано выше.

Этот код должен работать, хотя он не проверял его

0 голосов
/ 12 июня 2009

Может быть, вы должны попытаться использовать stateful и изменить свойства свойства для полей формы или что-то еще, чтобы вернуть фокус?

0 голосов
/ 11 июня 2009

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

Вы должны быть в состоянии предотвратить получение фокусом дна, просто вернув false из его обработчика onclick.

...