只要精神不滑坡,办法总比困难多
前言
当div设置contenteditable属性实现可编辑时,可以调用document.execCommand方法向可编辑div中插入内容。如果可编辑div没有点击或者失去了焦点,都无法实现将元素插入到可编辑div中,接下来就跟大家分享下,如何让div获取焦点,解决这一BUG。先看下我们最终实现的效果:
实现思路
上述gif图中表情插入div的具体实现,可阅读我的另一篇文章: Vue实现图片与文字混输
定义一个函数实现div获取焦点
给可编辑div元素绑定id属性
通过document.querySelector方法获取可编辑div元素
拿到可编辑div元素后调用focus方法实现div焦点的获取
点击表情图标时绑定点击事件指向第一步声明的函数
实现过程
在实现之前我们先看看掘金的发沸点功能,入图所示:掘金用的也是可编辑div实现,点击表情图标时,他也用了和我同样的方法让div获取焦点,然后插入图片到可编辑div。
可编辑div设置id
复制代码实现获取焦点函数
getEditableDivFocus: function (){
document.querySelector('#msgInputContainer').focus();
}
复制代码工具栏绑定toolbarSwitch函数