Fatal编程技术网
  • javascript/
  • Javascript 如何让按钮不聚焦？

Javascript 如何让按钮不聚焦？

javascript button extjs

Javascript 如何让按钮不聚焦？,javascript,button,extjs,focus,Javascript,Button,Extjs,Focus,我希望我的（ExtJS）工具栏按钮不是在单击时抓住网页上的焦点，而是在单击时保持焦点不变的同时执行“操作”。如何做到这一点？因为工具栏按钮的样式只是普通的HTML按钮元素，所以这是一种实际的浏览器行为，在更改它之前，您应该三思而后行。但无论如何 您应该能够通过从其onclick处理程序返回false来防止botton接收焦点。也许您应该尝试使用stateful和表单字段的statechange属性，或者其他什么来恢复焦点 我不认为有一种简单的方法可以做你想做的事情，因为这是浏览器的默认行为 当然

我希望我的（ExtJS）工具栏按钮不是在单击时抓住网页上的焦点，而是在单击时保持焦点不变的同时执行“操作”。如何做到这一点？

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

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

也许您应该尝试使用
stateful
和表单字段的statechange属性，或者其他什么来恢复焦点

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

当然，您可以在单击按钮时立即对其进行模糊（），但这样做只会取消选择所有内容。要使以前活动的对象重新获得焦点，您必须为每个元素添加模糊处理程序来创建一个排序的“内存”，以跟踪上次哪个元素失去了焦点（将元素的id存储在全局中，并在元素失去焦点时进行更新）。

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>


函数preventFocus（）{
var ae=document.activeElement；
setTimeout（函数（）{ae.focus（）}，1）；
}
我会将一个模糊事件侦听器附加到所有字段。此侦听器应将失去焦点的字段保存在全局变量中

然后，所有工具栏按钮都应该有一个焦点事件侦听器。此侦听器应聚焦如上所述保存的字段

此代码应该可以工作，尽管它没有测试它

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


// Prevent capturing focus by the button.
$('button').on('mousedown', 
    /** @param {!jQuery.Event} event */ 
    function(event) {
        event.preventDefault();
    }
);




函数焦点（）{
document.getElementById（'focus'）.focus；
}
document.onkeydown=focusor；
document.onclick=focusor；


我发现，你必须制作一个虚拟元素，我发现按钮在这种情况下工作得最好。将按钮放入div中，使div为0px

[不要让div显示none，某些浏览器会忽略它]

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


有点像千斤顶，但它能工作
 这通常对我来说很有用：


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



我的按钮


发件人：

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


排名靠前的答案在技术上是正确的，但取决于jQuery

下面是一个简单的例子：


所有这些答案都很古怪。这里有一个非常好的技巧，只使用CSS



提交


现在在css中：


按钮[禁用]>*{
指针事件：无；
}



诀窍是必须使用内部跨距，否则按钮仍然会从输入中偷走焦点。
我的解决方案是将
替换为
，并将其样式设置为按钮。

当您单击Div时，它似乎没有集中注意力。
谢谢，我认为这是正确的方法，但在我尝试时，它似乎不起作用。ATM我已经实现了一个令人讨厌的解决方案，在每个表单上我都设置了默认值：{onBlur:fieldExit}，其中fieldExit将调用对象放入lastField变量，然后在按钮处理程序的末尾（它们都使用相同的处理程序），我执行lastField.focus（）。这适用于文本字段，但奇怪的是不适用于复选框（我还没有测试其他复选框）。您可以阻止按钮保持焦点，但如果不跟踪这些内容，则无法将焦点返回到上一个元素。当单击触发时，取消焦点已为时过晚。如上所述，应该在onmousedown中防止默认行为的发生。它不会阻止“onclick”，但会阻止焦点更改。至少在Webkit浏览器中，document.activeElement是HTML5的一部分。只有Firefox2和Safari不支持它，尽管据报道Safari的最后一个夜间版本支持它。因为您使用的是onmousedown，所以您可以使用preventDefault，而不必费心存储当前活动的元素，因为它永远不会被关注。但是，您可能希望在500毫秒左右的时间内，使用计时器撤销按钮，以显示该按钮已被单击。我认为您可以更改接受的答案，并选择投票最多的一个，这将对阅读此有用问题的人大有帮助。此问题需要多个按钮，不止一个。

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