contenteditable="true"的標(biāo)簽限制字?jǐn)?shù)的時(shí)候修改光標(biāo)位置

有時(shí)候input和textarea并不能完全滿(mǎn)足ui需求，這個(gè)時(shí)候我們就用contenteditable="true"來(lái)將別的標(biāo)簽修改為可編輯狀態(tài)，但當(dāng)我們通過(guò)js修改了內(nèi)容之后光標(biāo)的位置就是一個(gè)問(wèn)題，那么下面這個(gè)函數(shù)就可以輕松搞定

function limitTextNum(element, num) {const textLen = element.innerText.lengthif(textLen <= num) {return}// 獲取鼠標(biāo)位置let curPosition = 0const selection = window.getSelection();if(selection.rangeCount > 0) {let curRange = selection.getRangeAt(0);curPosition = curRange.endOffset;}if(curPosition > num) {curPosition = num}// 刪除多余的文字element.innerText = element.innerText.slice(0, num)// 還原光標(biāo)位置const range = document.createRange();range.setStart(element.firstChild, curPosition);range.collapse(true);selection.removeAllRanges();selection.addRange(range);element.focus();}