在Vue做項(xiàng)目時(shí),做了一個(gè)div[contenteditable=true]的組件作為文本輸入框

在非手動(dòng)輸入值后,光標(biāo)會(huì)丟失,經(jīng)測(cè)試以下這段代碼可用,直接將光標(biāo)定位到最后

function keepLastIndex(obj) {  console.log(obj)  console.log(window.getSelection)  console.log(document.selection)  if (window.getSelection) { //ie11 10 9 ff safari   obj.focus(); //解決ff不獲取焦點(diǎn)無法定位問題   var range = window.getSelection(); //創(chuàng)建range   range.selectAllChildren(obj); //range 選擇obj下所有子內(nèi)容   range.collapseToEnd(); //光標(biāo)移至最后  } else if (document.selection) { //ie10 9 8 7 6 5   var range = document.selection.createRange(); //創(chuàng)建選擇對(duì)象   //var range = document.body.createTextRange();   range.moveToElementText(obj); //range定位到obj   range.collapse(false); //光標(biāo)移至最后   range.select();  } }

在實(shí)際使用時(shí),vue.$emit是一個(gè)異步函數(shù),最好在調(diào)用這個(gè)定位前加上一定的延遲,經(jīng)測(cè)試,5ms就可以了

setTimeout(()=>{ keepLastIndex(e.target)},5)

以上這篇Vue中div contenteditable 的光標(biāo)定位方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持錯(cuò)新站長(zhǎng)站。