iOS上textarea刪除內(nèi)容時光標(biāo)移位問題

現(xiàn)象:輸入一串文字餐济,再刪除內(nèi)容径玖,當(dāng)內(nèi)容完全刪除之后,光標(biāo)不在初始位置(左上側(cè))颤介,而是前面有個空的占位梳星,這個時候placeholder已經(jīng)顯示出來。再點(diǎn)擊軟鍵盤上的回退鍵滚朵,可以向前回退一下冤灾。

如下圖:

圖片發(fā)自簡書App


前提:這個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)聽)获印。


圖片發(fā)自簡書App



由此可見述雾,css('height', ‘a(chǎn)uto’)會影響textarea光標(biāo)位置兼丰。原理我還是不太明白╮(╯╰)╭哎

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末玻孟,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子鳍征,更是在濱河造成了極大的恐慌黍翎,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蟆技,死亡現(xiàn)場離奇詭異玩敏,居然都是意外死亡斗忌,警方通過查閱死者的電腦和手機(jī)质礼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進(jìn)店門旺聚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人眶蕉,你說我怎么就攤上這事砰粹。” “怎么了造挽?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵碱璃,是天一觀的道長。 經(jīng)常有香客問我饭入,道長嵌器,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任谐丢,我火速辦了婚禮爽航,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘乾忱。我一直安慰自己讥珍,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布窄瘟。 她就那樣靜靜地躺著衷佃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蹄葱。 梳的紋絲不亂的頭發(fā)上氏义,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天,我揣著相機(jī)與錄音图云,去河邊找鬼惯悠。 笑死,一個胖子當(dāng)著我的面吹牛琼稻,可吹牛的內(nèi)容都是我干的吮螺。 我是一名探鬼主播,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼帕翻,長吁一口氣:“原來是場噩夢啊……” “哼鸠补!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起嘀掸,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤紫岩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后睬塌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泉蝌,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡歇万,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了勋陪。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片贪磺。...
    茶點(diǎn)故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖诅愚,靈堂內(nèi)的尸體忽然破棺而出寒锚,到底是詐尸還是另有隱情,我是刑警寧澤违孝,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布谆棱,位于F島的核電站对蒲,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜嫌松,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一歧斟、第九天 我趴在偏房一處隱蔽的房頂上張望闯团。 院中可真熱鬧函匕,春花似錦、人聲如沸撒踪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽制妄。三九已至掸绞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間耕捞,已是汗流浹背衔掸。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留俺抽,地道東北人敞映。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像磷斧,于是被迫代替她去往敵國和親振愿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,585評論 2 359

推薦閱讀更多精彩內(nèi)容