現(xiàn)象:輸入一串文字餐济,再刪除內(nèi)容径玖,當(dāng)內(nèi)容完全刪除之后,光標(biāo)不在初始位置(左上側(cè))颤介,而是前面有個空的占位梳星,這個時候placeholder已經(jīng)顯示出來。再點(diǎn)擊軟鍵盤上的回退鍵滚朵,可以向前回退一下冤灾。
如下圖:
前提:這個textarea中有做計數(shù)的判斷(判斷已經(jīng)輸入多少文字),而且會更新右下角的數(shù)字辕近。
定位過程比較苦悶韵吨,上網(wǎng)查了一些類似問題,有提到是某些position樣式影響到光標(biāo)位置移宅、有提到是空格導(dǎo)致归粉。一一嘗試后,發(fā)現(xiàn)并不是相同的問題漏峰。
首先糠悼,輸入的文字,前后沒有空格浅乔,其次倔喂,光標(biāo)的初始位置是正確的铝条。
這里的textarea使用input監(jiān)聽事件,因?yàn)樾枰诿枯斎胍粋€文字都計數(shù)席噩。一開始懷疑是計數(shù)不準(zhǔn)確導(dǎo)致光標(biāo)異位班缰,不過有點(diǎn)想不通--為什么計數(shù)會影響光標(biāo)的位置,光標(biāo)的位置應(yīng)該是由輸入法和瀏覽器事件控制的悼枢,業(yè)務(wù)代碼上沒有做處理埠忘。但是把計數(shù)邏輯屏蔽后,光標(biāo)異位問題就消失了馒索。
反正是沒理解原因莹妒,于是又嘗試了其它方法,使用keyup事件監(jiān)聽輸入內(nèi)容双揪。使用keyup之后动羽,光標(biāo)異位問題消失,計數(shù)正常渔期。不過又生出一個問題:keyup無法監(jiān)聽粘貼运吓、剪切事件,需要單獨(dú)監(jiān)聽疯趟。
好吧拘哨,看來也不是這個原因。又看了一遍代碼信峻,發(fā)現(xiàn)有個地方給textarea監(jiān)聽了input倦青、propertychange事件,目的是使輸入內(nèi)容變多的時候textarea能自動撐開盹舞,里面設(shè)置了height屬性為auto产镐。不確定是不是這段邏輯的影響。改了一下踢步,去掉css('height', 'auto')癣亚,并等待頁面加載完畢后再執(zhí)行此邏輯,結(jié)果光標(biāo)問題消息了(計數(shù)使用的還是input監(jiān)聽)获印。
由此可見述雾,css('height', ‘a(chǎn)uto’)會影響textarea光標(biāo)位置兼丰。原理我還是不太明白╮(╯╰)╭哎