2020-03-16 JS-原生js实现机顶盒页面键盘事件

最新推荐文章于 2023-02-08 10:05:42 发布
最新推荐文章于 2023-02-08 10:05:42 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xumaozeng/article/details/104900040
版权

2020-03-16 JS-原生js实现机顶盒页面键盘事件

简介：最近做一个电视机顶盒项目，要用到遥控器去实现页面上焦点的移动，来选择产品以及后续操作，遇到的问题是键盘keydown事件在绑定一个div元素后，没有在离开div解除绑定的话，当再次移动到此div上，会出现重复操作的Bug。

问题描述-bug复现

  1. 初始化页面，焦点在一个产品上，键盘向下移动，到第一个支付方式上
    向下移动
  2. 焦点在支付方式模块上，键盘向上移动，到之前选中的产品上
    向上移动
  3. 键盘再次向下移动，这时候会触发多次支付方式div上的keydown事件
最低0.47元/天 解锁文章
xumaozeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
js 按键捕获
齐枫的博客
08-22 1124
键盘上的所有按键都是可以捕获的，我们可以用它来优化我们的页面功能 如下，是监控按键F12 的 document.onkeypress = function (event) { event = (event || window.event); console.log(event) if (event.keyCode == 123) { ...
puck-remote:使用Puck.js按钮作为遥控器的简单示例
05-09
圆盘遥控器 一个使用Puck.js按钮作为遥控器的简单示例。 它滥用冰球的电池电量广告来指示按钮是否已被按下。 空闲时，其电池电量设置为0。单击该按钮一次，红色LED亮3秒钟，电池电量设置为10。双击将绿色LED电量设置为20。A三次单击可设置蓝色LED和30号电池电量。 该存储库包含一个node.js应用程序，该应用程序侦听广告值的更改并将其打印出来。 puck/puck.js是要上传到您的puck设备的草图 index.js是一个node.js应用程序，可监听设备广告并打印出更改后的值。 设置您的冰球 打开 连接到您的冰球设备 从puck/puck.js上传草图 断开 设置并运行本地应用 在此存储库的根目录中运行npm install 运行node index.js
JS捕获机顶盒遥控器按键
letterss的博客
10-15 6298
键值捕获keyevent.util.js带数字识别 键值捕获keyevent.util.js不带数字识别提取码：7qpl 在页面引入keyevent.util.js文件，并添加以下js代码，联通广电机顶盒都适用 <script type="text/javascript" src="/js/keyevent.util.js"></script> <s...
cocos2d js 3.2响应按键消息的一些坑
胡老哈的学习记录
01-27 1687
cocos2d js 3.2版本，响应android TV遥控器按键消息，需要在按键弹起时响应，按下时不会有任何响应。所以所有处理要放在按键弹起的时候处理。 另外，这个版本的cc.Key里对应的key值有问题，建议直接使用key值做处理。 附上在天猫盒子上的一些测试结果： android TV: 左:159  右:160 上:161 下:162 OK:163 MENU:18
【Auto.js】给手机编一个模拟遥控器
m0_72041756的博客
06-17 2292
本来想给自家的智能电视做个 APP，但家里人要看电视，我又没有电脑，全靠 AIDE 在手机上敲代码，运行测试也是。看来踏入 TV 开发的第一步都有困难。而电视与手机的最大区别在于电视用遥控器操作，不能触屏，而手机可以触屏。于是我想到了 Auto.js，可以用它写一个遥控器浮窗脚本，在手机上模拟遥控器操作，如此模拟电视环境运行 APP。由于安卓虚拟机的 Android TV 和 Google 官方的电视棒的遥控器与国内的有极大不同，没有 0-9 数字键，只有开关、方向键、OK 键，所以我只要做一个方向键盘就行
13、事件绑定（按键修饰符（@keyup.你需要按的键））
分享java学习路上的一些笔记，不足之处多多见谅。
02-08 221
小需求：我们点击esc键的时候我们输入的文本清空第一步：我们给我们的input绑定一个esc的按键修饰符然后会触发一个方法 第二步：我们写我们的方法逻辑，当我们的上面input没有（）传参数的时候我们下面的方法可以拿到默认的e，然后通过e.target（事件源）.value来直接设置为‘’就ok了 结果 按下esc到 第二个需求：我们的enter按键我们点击后可以发送请求啥的
JS-Swiper:使用原生JS实现的无缝轮播图
05-29
原生JS无缝轮播图 ，如果无法打开预览，原因是部分运营商DNS污染（域名指往不正确的IP地址），可以通过 修改hosts文件 / 修改DNS服务器 / 代理 的方式访问 HTML部分 最外层是一个固定宽度且带有overflow: hidden;...
js-实现原生表单提交验证.zip
07-11
原生js表单提交验证代码下载。原生JavaScript实现，适合新手学习js。用户填写完成后，点击提交按钮，判断填写的信息是否符合要求，如不符合将弹出相应的修改信息要求，引导用户正确填写表单。
ew-color-picker:一个基于原生js实现的颜色选择器
04-18
一个基于原生js而封装的颜色选择器插件。 安装与使用 安装 npm install ew-color-picker --save-dev 引入 [removed][removed] 颜色选择器插件如下: //默认配置 var color = new ewColorPicker('.demo'); 或 var...
捕获遥控器代码
10-26
都捣鼓了，破了。回过头来看，其实完全没那么多高深的需求，只要能装个第三方软件就足够。所以，发个帖，只讨论如何用最简单的方式装软件（如：当贝桌面） 思路： DNS 劫持 + HTTP 重定向，替换“咪咕音乐”的升级文件（老司机 估计都猜到步骤了） 工具：待破的盒子 能开WIFI热点的电脑（本人用的 Win10） HTTP服务器软件（本人用的 MyWebServer，小巧方便，也可以自己装IIS） 待安装的 第三方软件（本人用的当贝桌面 apk） 步骤（字稍多，实际很简单）：
JavaScript案例-原生ajax
02-16
"JavaScript案例-原生ajax"这个主题聚焦于如何不依赖任何库或框架，仅用JavaScript原生API实现Ajax通信。 Ajax的核心在于XMLHttpRequest对象，它允许我们在不刷新整个页面的情况下发送HTTP请求并接收响应。以下是...
原生js实现下拉框功能（支持键盘事件）
11-27
在本文中，我们将深入探讨如何使用原生JavaScript实现下拉框功能，并且支持键盘事件。首先，我们需要了解HTML中的`<select>`元素及其关联的`<option>`元素，它们是创建下拉列表的基础。在纯JavaScript环境中，我们不...
js模拟键盘或遥控器操作(加强版)
caidimin的博客
01-20 4585
OTT-WEB-HD-CATEGORY body{background:url(images/category/category_bg.jpg) no-repeat;width:1910px;height:1080px;float:left;} .category-main-left{width:393px;margin-left:-10px;float:left;} .category-
jQuery 事件--按键事件
前端
01-29 1776
按键事件 Tables Are keyup([[data],fn]) 当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。 keypress([[data],fn]) 当键盘或按钮被按下时，发生 keypress 事件。 keydown([[data],fn]) 当键盘或按钮被按下时，发生 keydown 事件。 说明
js面向对象开发互联网机顶盒应用头端之三
weixin_34310785的博客
08-20 119
/*** Dare MoviePlay Object.* @constructor*/ //声明构造函数 构造函数初始化变量Dare.MoviePlay = function () { this.parent = new Dare.Util(); this.className = 'Dare.MoviePlay'; //----类Dare.MoviePlay全局属性变量-----...
JS-DOM----事件高级
bjsyc123456的博客
11-08 951
事件监听 addEventListener()方法 参数1为具体的事件 参数2为事件触发后的函数 语法： 元素.addEventListener('click（具体的事件）',function(e) { // 事件触发后处理的函数代码 }) 解绑事件 传统方式解绑事件 元素.onclick = null; 方法监听解绑事件的方式 元素.removeEventListener('具体的事件',绑定事件时的回调函数名) 解绑事件的代码示例： <!DOCTYPE html.
2020-01-09 本地上传文件速率的计算
xumaozeng的博客
01-09 2062
2020-01-09 本地上传文件速率的计算文件上传使用的组件是element-ui中的el-upload计算文件上传速率函数每个文件都有个唯一值，这个值就是MD5，获取方法如下 描述：项目中对上传视频文件要求显示进度和速率 文件上传使用的组件是element-ui中的el-upload 使用el-upload中的钩子函数on-progress和before-upload中的参数计算出上传速率...
在Javascript中实现HMAC-SHA256，使用原生的JS
最新发布
05-26
要在JavaScript中实现HMAC-SHA256，可以使用Node.js内置的crypto模块。以下是一个示例代码： ```javascript const crypto = require('crypto'); function hmacSha256(key, message) { const hmac = crypto.createHmac('sha256', key); hmac.update(message); return hmac.digest('hex'); } const key = 'my-secret-key'; const message = 'hello world'; const hash = hmacSha256(key, message); console.log(hash); ``` 在此示例中，我们首先导入了Node.js中的crypto模块。然后，我们定义了一个名为hmacSha256的函数，该函数接受一个密钥和一个消息，并返回HMAC-SHA256哈希值。在该函数中，我们使用crypto.createHmac方法创建了一个HMAC对象，并将其初始化为使用SHA256算法和给定密钥。然后，我们使用update方法将消息传递给HMAC对象，并使用digest方法获取哈希值。最后，我们使用示例密钥和消息调用hmacSha256函数，并将结果打印到控制台中。 请注意，此示例仅适用于Node.js环境。如果您需要在浏览器中运行此代码，您需要使用CryptoJS或其他JavaScript加密库。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值