32

我希望我的（ExtJS）工具栏按钮在单击时不会抓住网页上的焦点，而是在通过单击保持焦点不变的同时做它们的“事情”。我怎么做？

4

11 回答 11

47

取消 的默认行为会onmousedown阻止元素获得焦点：

// Prevent capturing focus by the button.
$('button').on('mousedown', 
    /** @param {!jQuery.Event} event */ 
    function(event) {
        event.preventDefault();
    }
);
于 2015-06-20T02:49:53.927 回答
6

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>
于 2009-06-12T10:52:39.027 回答
5

这通常对我有用：

<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：

负值（通常）tabindex="-1"表示该元素应该是可聚焦的，但不应通过顺序键盘导航访问。使用 JavaScript 创建可访问的小部件最有用。

于 2018-09-17T15:54:07.107 回答
4

我认为没有一种简单的方法可以做你想做的事情，因为这是浏览器的默认行为。

您当然可以在单击按钮后立即 blur() 按钮，但这只会取消选择所有内容。要让先前活动的对象重新获得焦点，您必须通过为每个元素添加模糊处理程序来创建各种“记忆”，以跟踪哪个元素最后获得/失去焦点（将元素的 id 存储在全局并在元素失去焦点时更新它）。

于 2009-06-12T10:45:12.710 回答
3

票数最高的答案在技术上是正确的，但取决于 jQuery ......

这是一个更简单的例子：

<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();"></span>
于 2020-01-16T02:32:42.387 回答
2

我的解决方案是将其替换<button />为<div />按钮并将其样式化。当您单击它时，看起来 Div 并没有关注它。

于 2021-03-02T16:38:37.707 回答
1

因为工具栏按钮只是样式化的普通 HTML 按钮元素，所以这是一种实际的浏览器行为，在更改它之前应该三思而后行。但尽管如此...

您应该能够通过仅从false其onclick处理程序返回来防止按钮接收焦点。

于 2009-06-11T17:06:30.963 回答
1

也许您应该尝试使用stateful和状态更改表单字段的属性或其他任何东西来重新获得焦点？

于 2009-06-12T10:37:30.577 回答
1

我会将一个模糊事件侦听器附加到所有字段。此侦听器应将失去焦点的字段保存在全局变量中。

然后所有工具栏按钮都应该获得一个焦点事件侦听器。此侦听器应关注按上述方法保存的字段。

这段代码应该可以工作，虽然它没有测试它

于 2009-06-16T08:43:39.493 回答
1 
<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 显示 none，一些浏览器会忽略它]

基本上任何点击或按钮按下，它都会专注于这个虚拟按钮。我有一个非常相似的项目，每当他们按下向下键时，它就会选择页面上的第一个按钮，这只是一遍又一遍地关注按钮。

有点自高自大，但它有效。

于 2017-05-15T07:55:54.030 回答
-3

所有这些答案都是古怪的。这是一个非常棒的技巧，它只使用 CSS

<button type="submit" disabled>
  <span>Submit</span> <!-- the <span> is the secret -->
</button>

现在在你的 CSS 中：

button[disabled] > * {
  pointer-events: none;
}

诀窍是必须使用内部跨度，否则按钮仍会从输入中窃取焦点。

于 2020-10-09T21:48:55.577 回答