div的contenteditable属性(及鼠标位置问题)

contenteditable属性

• 全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。
• 该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为 true、false 或空字符串中的一个，并且不允许简写为 <label contenteditable>Example Label</label>正确的用法是 <label contenteditable="true">Example Label</label>

MND文档关于contenteditable

大概就是用div实现类似input

<div :contenteditable="true" class="content-item" ref="content-item" @input="changeServiceContent">
   	<span>{{props.setting.serviceContentConfig.text}}</span>
</div>
1
2
3

changeServiceContent(e) {
	//解决删除鼠标位置问题
    this.$refs["content-item"].focus();
    document.execCommand("selectAll", false, null);
    document.getSelection().collapseToEnd();
    //赋值双向绑定
    this.props.setting.serviceContentConfig.text = e.target.textContent;
},
1
2
3
4
5
6
7
8

注意：div中的内容如果不用span包裹，鼠标位置可能会有问题
使用contenteditable不能使用change事件，但是可以用input事件和blur事件等。