如何用键盘和活动触发按钮

关键词：

【中文标题】如何用键盘和活动触发按钮【英文标题】：How to trigger button with keyboard and active 【发布时间】：2021-12-15 05:34:53 【问题描述】：

我想用键盘和鼠标触发一个按钮。 它可以工作，但是如果我用键盘触发它，则 :active 不会显示。

HTML

<button id="btn1" onclick="btn1()"> click </button>

CSS

#btn1:active
transform:scale(1.1);

Javascript

document.addEventListener("keydown", function(event) 
    if (event.key === '1') 
      document.getElementById("btn1").click();
    
);

【问题讨论】：

【参考方案1】：

您需要为此用例使用 Javascript 添加/删除类。

在keydown eventListner 中添加活动类。为 keyup 添加另一个 eventListner，然后删除该活动类。

document.addEventListener("keydown", function(event) 
      var btn = document.getElementById("btn1");
      btn.click();
      btn.classList.add('active');
);
document.addEventListener("keyup", function(event) 
      var btn = document.getElementById("btn1");
      btn.classList.remove('active');
);

function btn1()
  

#btn1:active
transform:scale(1.1);

.active
transform:scale(1.1);

<button id="btn1" onclick="btn1()"> click </button>

【讨论】：

【参考方案2】：

您可以使用 selector.style

并使用 setTimeout() 转换为默认比例

示例：

document.addEventListener("keydown", function(event) 
    if(event.key == "1")
        clicked(document.getElementById("btn1"));
        document.getElementById("btn1").click();
    
);

function clicked(el)
    el.style.transform = "scale(1.1)";
    setTimeout(()=> el.removeAttribute('style'); , 100);

#btn1:active
  transform:scale(1.1);

<button id="btn1" onclick="//btn1()"> click </button>

【讨论】：

如何用sendmessage发送键盘按键消息

参考技术A如果是一个按钮的话，那么直接发送一个点击的消息即可：SendMessage(hWnd,BM_CLICK,0,0);如果一定要发送Enter消息，可以这样：SendMessage(hWnd,WM_KEYDOWN,VK_RETURN,0);SendMessage(hWnd,WM_KEYUP,VK_RETURN,0);hWnd代表按钮的句柄。 查看详情

高分请求javascript高人们：如何用javascript判断鼠标键盘无动作？

varobject01if(鼠标键盘无动作)object01的位置回到(x=0,y=0,z=o)//当鼠标键盘无动作的时候，让object01这个物体回到x=0,y=0,z=0的位置。这个软件支持JavaScript,但是我是初学者，不知道JavaScript中怎么表达当鼠标键盘无动作，不知道应该如何写... 查看详情

如何用javascript触发按钮的click事件

1、调用button的客户端方法——可以触发button的OnClick事件2、使用ASP.NET的PostBack函数——比较适合ASP.NET的开发思路按钮是已经成功加载到页面了。document.getElementById(\'CloseWindow\').click();<input type="submit" name="CloseWindow" value="Button"... 查看详情

qq的一些图标是隐藏了按钮的边框但是鼠标放在上面又出现了想问一下如何用wpf实现的

...隐藏了按钮的边框但是鼠标放在上面又出现了想问一下如何用WPF实现的假设这个图标是按钮BUTTON用样式更改了1图标的样式隐藏了按钮的边框问如在按钮样式的触发器里面实现鼠标移动到按钮上触发透明的边框谢谢或者有更好的... 查看详情

如何用js来点击按钮

原理用JS来点击按钮需要分2步，第一步是选中按钮的元素，第二步是使用元素自带的click函数。例如接下来我将要演示的例子中，仅用document.getElementById("btn").click()一行就可以控制按钮点击。其中document.getElementById("btn&... 查看详情

按下后退按钮时如何用片段A替换片段C？

】按下后退按钮时如何用片段A替换片段C？【英文标题】：HowtoreplacefragmentCwithfragmentAwhenbackbuttonispressed?【发布时间】：2012-12-0817:20:50【问题描述】：我的场景：活动1由片段A->B->C组成。所有片段都使用以下代码添加：FragmentMa... 查看详情

htmltable如何用按钮显示和隐藏表格中的内容？

例如表格第1行有ABCD三格，用一个按钮控制B格和D格的隐藏和显示？如果你的规律是这样，每一行1234指定点击24。。。隐藏那么用jquery$(tabletrtd:odd).hide();来控制参考技术Adisplay:none;属性 查看详情

javascript：如何用逗号显示ios数字键盘

<inputtype="number">此输入不允许您添加逗号，这对于进行ammount输入非常方便。有没有办法用javascript向键盘添加逗号，就像Revolut应用程序在这里做的那样？答案iOS中的<inputtype="number">应该显示带有数字和标点符号的键盘：... 查看详情

如何用机器学习强化市场营销活动。

以下是我自己翻译的，错误难免，请见谅。英文原文，地址https://econsultancy.com/blog/65275-how-to-use-machine-learning-to-enhance-your-marketing-campaigns/机器学习看上去和市场人员没啥关系，这玩意貌似只是那些程序狗，计算机呆子做的事情，... 查看详情

如何用活动结果 API 替换 startActivityForResult？

】如何用活动结果API替换startActivityForResult？【英文标题】：HowtoreplacestartActivityForResultwithActivityResultAPIs?【发布时间】：2020-08-1019:14:11【问题描述】：我有一个主要活动作为调用不同活动的入口点，具体取决于条件。其中，我使... 查看详情

如何用另一个按钮隐藏/显示一个按钮 |扑？

】如何用另一个按钮隐藏/显示一个按钮|扑？【英文标题】：Howtohide/showabuttonwithanotherbutton|Flutter?【发布时间】：2020-12-2319:29:35【问题描述】：编程和飞镖/颤振新手。谢谢。所以2按钮我！和你！，我必须隐藏并显示我！按钮点击... 查看详情

如何用函数或vba调用(引用)另外一个工作表的数据

如何用函数或VBA调用(引用)另外一个工作表的数据比如说.我做个宏.要求是让他自己寻找sheet2中的指定位置到sheet1中的指定位置.请问如何用函数写或者如何用VBA写.1、首先，在Excel表格中输入如图内容，以方便在VBA中进行读取和处... 查看详情

如何用 safari 缓存触发 componentDidMount？

】如何用safari缓存触发componentDidMount？【英文标题】：HowdoesreacttriggercomponentDidMountwithsafaricache?【发布时间】：2019-10-0901:40:31【问题描述】：React16在返回Safari时触发componentDidMount()，即使组件从未卸载。react如何知道何时挂载？class... 查看详情

聚焦时如何用图像填充 LWUIT 按钮？

】聚焦时如何用图像填充LWUIT按钮？【英文标题】：HowtofillaLWUITButtonwithanimagewhenit\'sfocused?【发布时间】：2011-11-2714:52:33【问题描述】：我在LWUIT表单中有一个按钮，我有一个应该在这个按钮中绘制的图标，我希望图标填充所有按... 查看详情

如何用visio画uml活动图

参考技术A推荐用STARTUML那个是专门话UML的软件··挺好用的··我们也在学那个 查看详情

如何在输入中绑定两个键盘键，如 Ctrl + L

】如何在输入中绑定两个键盘键，如Ctrl+L【英文标题】：HowtobindtwokeyboardkeyslikeCtrl+Linaninput【发布时间】：2019-11-1515:49:07【问题描述】：我有一个文本输入和一个按钮（见下文）。当按下某个“Ctrl+Enter（其他快捷键）”键时，如... 查看详情

如何用jquery美化单选按钮和复选框

jQuery本身对UI的优化并不多，你可以使用jQueryUI（jQuery的扩展库），jQueryUI对按钮、复选框都做了封装，使用起来很方便。jQuery官方网站：http://jqueryui.com/代码下载、文档、实例在其官方网站上都能找到，使用与jQuery结合得非常好... 查看详情

vb中单击命令按钮触发哪些事件

...，当焦点不在按钮上即发生。3、在vb中单击命令按钮触发键盘按下事件，任意按下任意的键盘即可触发事件。4、在vb中单击命令按钮触发鼠标按下事件，当鼠标按下即可触发的事件，无论是左键还是右键。5、在vb中单击命令按钮... 查看详情