1 输入框内输入 支持一键删除 一键选择
如图中 回执消息 缩略图 和@名字 都是要支持一键选中 一键删除 类似于 微信的效果
这不禁让我想起了当年写cad活着sketch时候的块的感觉，那么在html里面，我目前想到的办法有两个，第一元素加 contenteditable="false"属性，第二用做成 webcomponent
可惜经过试验两个的结果都不太好，首先都不可被选中，所以光标也会看不到
下面试验结果网易音乐客户端也支持@一键删除
但是网易云音乐网页版的@确实可以一个字符一个字符的删除的
第二个问题 中文状态下 shift +2 输入@时候无法
问题描述 输入@的入口一般有两个 第一ctrl+v粘贴，第二shift+2输入，其中shift+2输入时候
一般通过keydown事件
e.shiftKey && e.keyCode == 50 来判断
经过试验
在英文状态下 chrome 和firefox 都表现正常
但是在中文状态下 chrome 返回的 keycode 为229 而firefox返回的是0
而我们用的由qt提供的chrome49.0.26内核的游览器不知道什么鬼 中文状态不触发事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #app{ 300px; height:100px; border: 1px solid red; } </style> </head> <body> <div id="app" contenteditable="true"></div> </body> <script> let app = document.querySelector('#app'); app.addEventListener('keydown', function (e) { console.log('没有弹出联系人？:',e); if (e.shiftKey && e.keyCode == 50) {//是@ console.log('开始搜索:'); } }); </script> </html>
那么网易云音乐网页版 是怎么做的呢
他是应该通过keyup事件判断的,松开shift时候才触发事件。具体大家可自行检验
第三个问题 键盘上下控制箭头选择列表
这个是 给条目hover 加一个默认背景色如 #eee. 键盘上下键按下时候动态给每一个加一个selected-item类，背景色也是#eee. 这样就会出现两个选中效果，并且按下回车键确定适合 会议这个类名来确定当前的这个条目
