安卓电视 TV端的webview网页按键控制和一些小问题

最近做了个tv端的项目，是webview套的vue项目，电视上还不能调试，可把我难坏了。

首当其冲的就是按键控制，包括上下左右，确定，返回，home键等。

查了一下它们的keycode：

36home，37左，38上，39右，40下，13确定， 8（也有的是4）返回。

返回键默认是跳出app，如果不灵，需要app端配合写回退方法。

写了一个公共方法（要用到jquery）：

import router from '../router'
var buttons = [], //需要聚焦的元素集合focusIndex = 0, //当前聚焦元素focusLen = 0 //需要聚焦的元素总个数function initFocus(name, curr) {buttons = $('.' + name); //获取传入class名的需要聚焦的元素focusLen = buttons.length; //个数focusIndex = curr; //当前聚焦元素buttons.eq(focusIndex).addClass('focus'); //为当前聚焦元素添加聚焦样式classbuttons.not(":eq(" + focusIndex + ")").removeClass('focus');//为非当前聚焦元素移除聚焦样式class
}//绑定方法, focusTopArray是按上键时的矩阵数组，如：[[1,0],[0,1]], focusBottomArray是按下键时的矩阵数组，左右一般就是加减，我就没加上，可以看情况另外扩写
//导航和swiper是例外情况，另加的
function bindFocus(id, focusTopArray, focusBottomArray) {document.onkeyup = function(e) {var key = e.which; //获取keycode//36home 37左 38上 39右 40下 13确定 8返回if (key == 37) {focusIndex =focusIndex - 1 < 0 ? 0 : focusIndex - 1;//样式操作buttons.eq(focusIndex).addClass('focus');buttons.not(":eq(" + focusIndex + ")").removeClass('focus');//导航if (buttons.eq(focusIndex).hasClass('top-btn')) {buttons.eq(focusIndex).trigger("click");}//swiperif (buttons.eq(focusIndex).hasClass('lesson-item')) {$('.slide-index').val(focusIndex);$('.to-slide').trigger('click')}} else if (key == 39) {focusIndex =focusIndex + 1 > focusLen ? focusIndex : focusIndex + 1;//样式操作buttons.eq(focusIndex).addClass('focus');buttons.not(":eq(" + focusIndex + ")").removeClass('focus');//导航if (buttons.eq(focusIndex).hasClass('top-btn')) {buttons.eq(focusIndex).trigger("click");}//swiperif (buttons.eq(focusIndex).hasClass('lesson-item')) {$('.slide-index').val(focusIndex);$('.to-slide').trigger('click')}} else if (key == 38) {if (focusTopArray) {var index = focusIndex;focusTopArray.forEach(element => {if (element[0] == focusIndex) {index = element[1];}});focusIndex = index;} else {focusIndex =focusIndex - 1 < 0 ? focusLen - 1 : focusIndex - 1;}//样式操作buttons.eq(focusIndex).addClass('focus');buttons.not(":eq(" + focusIndex + ")").removeClass('focus');//导航if (buttons.eq(focusIndex).hasClass('top-btn')) {buttons.eq(focusIndex).trigger("click");}//swiperif (buttons.eq(focusIndex).hasClass('lesson-item')) {$('.slide-index').val(focusIndex);$('.to-slide').trigger('click')}} else if (key == 40) {if (focusBottomArray) {var index = focusIndex;focusBottomArray.forEach(element => {if (element[0] == focusIndex) {index = element[1];}});focusIndex = index;} else {focusIndex =focusIndex + 1 > focusLen - 1 ? 0 : focusIndex + 1;}//样式操作buttons.eq(focusIndex).addClass('focus');buttons.not(":eq(" + focusIndex + ")").removeClass('focus');//导航if (buttons.eq(focusIndex).hasClass('top-btn')) {buttons.eq(focusIndex).trigger("click");}//swiperif (buttons.eq(focusIndex).hasClass('lesson-item')) {$('.slide-index').val(focusIndex);$('.to-slide').trigger('click')}} else if (key == 36) {router.push({ path: "/" });} else if (key == 8 || key == 4) {if (window.history.length <= 1) {router.push({ path: "/" });return false;} else {router.go(-1);}} else if (key == 13) {buttons.eq(focusIndex).trigger("click");} else {return false;}}
}
export {initFocus,bindFocus,
}

使用：

initFocus("focus-btn", 0);
bindFocus("index", this.focusTopArray, this.focusBottomArray);
//如果元素是死的就放在mounted里
//如果是另外渲染的就放在请求后的nextTick里
//内容比如列表个数变化或者tab切换时需要重新调用

还有一个问题困扰我，就是切换很快的时候莫名其妙会弹出键盘，明明我使用的都不是有输入功能的标签，最后只能让app端把键盘弹出事件禁掉了。

如果有大佬知道是怎么回事欢迎评论告知，多谢啦。

安卓电视 TV端的webview网页按键控制和一些小问题相关推荐

电视TV端使用RecyclerView开发遇到的问题
最近在做一个TV端使用的相册. 偷偷展示一下,相册大概长这个样子: 相册也支持多选删除: 非删除模式下点击单一图片会进入单一图片展示界面.单一图片可以左右翻页. 从展示界面返回相册界面,光标定位到展示 ...
OpenHarmony HDF Input框架模块按键控制LED基于小熊派micro
文章目录摘要开发环境 KEY驱动程序 KeyConfigInstance: RegisterKeyDevice 中断处理函数 KeyIrqHandle RegisterInputDevice:注册 ...
51单片机学习笔记之按键控制一盏小灯
我们今天学习一下单片机的案件,其实和小灯一样,大家不用紧张,简单的很. 首先我们新建个工程,如果有同学忘记了,可以看我之前的博客.下面是链接. https://blog.csdn.net/qq_408 ...
【Android工具】更新安卓TV云存储观影工具，安卓电视看剧看电影工具小结
微信关注公众号 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 之前分享过:[Android工具]安卓TV云存储观影工具测试正常,安卓电视看电影 ...
电视不正常Android镜像投屏,Mirror for Android TV(安卓电视投屏软件) V2.4 Mac版
Mirror for Android TV是一款适用于Mac的安卓电视投屏工具,它可以帮助用户在Mac上即可将视频.电影投屏到安卓电视上,适用于任何电视,设置框或媒体播放器与Android电视操作系统 ...
【Android工具】安卓TV云存储观影工具测试正常，安卓电视看电影方案小结
微信关注公众号 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 前几天分享过群晖的安卓客户端:[Android工具]群晖安卓客户端基础套件:Dr ...
mac和android电视互联,Mirror for Android TV(安卓电视投屏软件) V2.4 Mac版
Mirror for Android TV是一款适用于Mac的安卓电视投屏工具,它可以帮助用户在Mac上即可将视频.电影投屏到安卓电视上,适用于任何电视,设置框或媒体播放器与Android电视操作系统 ...
tv端h5_安卓市场tv版
梦幻西游网页版客户端,一般又称梦幻西游H5. 安卓市场tv版 1.xp任务管理器下载首领玩法增加稀有皮肤掉落,灵动仙羽,强力灵宠,应有尽有! 2.阿根廷vs冰岛哪个厉害暗影格斗 3 将格斗类游戏提 ...
[智能电视] E96/99RS.E83/85RS.E96RA.E650S创维安卓电视安装软件不再受限 [My Backup]
声明:此信息非官方发布,升级有风险,可能会对您的设备有所损坏,升级成砖与本人无关,自行试机,风险需自己承担.若使用此方法或软件表示已同意此声明. Skyworth云平台交流群-->1727613 ...
app后台运行会给服务器发信息吗_零基础搭建电视直播APP平台第一弹（支持安卓+电视盒子）...
大家好 , 我是阿尘,欢迎来到:极梦小屋. 由于公众号改版,建议大家星标置顶本公众号,就可以第一时间接收到我们所推荐的精品资源啦! 为了大家更方便的交流和可以不错过每天的分享,所以特意建了一个交流 ...

安卓电视 TV端的webview网页按键控制和一些小问题

安卓电视 TV端的webview网页按键控制和一些小问题相关推荐

最新文章

热门文章

安卓电视 TV端的webview网页 按键控制和一些小问题

安卓电视 TV端的webview网页 按键控制和一些小问题相关推荐

最新文章

热门文章

安卓电视 TV端的webview网页按键控制和一些小问题

安卓电视 TV端的webview网页按键控制和一些小问题相关推荐