div的contenteditable屬性(及滑鼠位置問題)
阿新 • • 發佈:2020-12-23
contenteditable屬性
- 全域性屬性 contenteditable 是一個列舉屬性,表示元素是否可被使用者編輯。 如果可以,瀏覽器會修改元素的部件以允許編輯。
- 該屬性是一個列舉屬性,而非布林屬性。這意味著必須顯式設定其值為 true、false 或空字串中的一個,並且不允許簡寫為
<label contenteditable>Example Label</label>
正確的用法是<label contenteditable="true">Example Label</label>
大概就是用div實現類似input
<div :contenteditable="true" class="content-item" ref="content-item" @input="changeServiceContent">
<span>{{props.setting.serviceContentConfig.text}}</span>
</div>
changeServiceContent(e) {
//解決刪除滑鼠位置問題
this.$refs["content-item"].focus();
document.execCommand("selectAll", false, null);
document.getSelection().collapseToEnd();
//賦值雙向繫結
this.props.setting.serviceContentConfig.text = e.target.textContent;
},
注意:div中的內容如果不用span包裹,滑鼠位置可能會有問題
使用contenteditable不能使用change事件,但是可以用input事件和blur事件等。