html 富文本编辑器相关--网易云音乐研究

 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{
            width: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>
View Code

　　那么网易云音乐网页版 是怎么做的呢

　　他是应该通过keyup事件判断的,松开shift时候才触发事件。具体大家可自行检验

　　

第三个问题  键盘上下控制箭头选择列表

 

 

这个是 给条目hover 加一个默认背景色如 #eee. 键盘上下键按下时候动态给每一个加一个selected-item类，背景色也是#eee. 这样就会出现两个选中效果，并且按下回车键确定适合 会议这个类名来确定当前的这个条目

　　

 

　　

 

posted @ 2017-04-25 14:31  _白马非马  阅读(260)  评论(0)  编辑  收藏  举报