现象:输入一串文字,再删除内容,当内容完全删除之后,光标不在初始位置(左上侧),而是前面有个空的占位,这个时候placeholder已经显示出来。再点击软键盘上的回退键,可以向前回退一下。
如下图:
前提:这个textarea中有做计数的判断(判断已经输入多少文字),而且会更新右下角的数字。
定位过程比较苦闷,上网查了一些类似问题,有提到是某些position样式影响到光标位置、有提到是空格导致。一一尝试后,发现并不是相同的问题。
首先,输入的文字,前后没有空格,其次,光标的初始位置是正确的。
这里的textarea使用input监听事件,因为需要在每输入一个文字都计数。一开始怀疑是计数不准确导致光标异位,不过有点想不通--为什么计数会影响光标的位置,光标的位置应该是由输入法和浏览器事件控制的,业务代码上没有做处理。但是把计数逻辑屏蔽后,光标异位问题就消失了。
反正是没理解原因,于是又尝试了其它方法,使用keyup事件监听输入内容。使用keyup之后,光标异位问题消失,计数正常。不过又生出一个问题:keyup无法监听粘贴、剪切事件,需要单独监听。
好吧,看来也不是这个原因。又看了一遍代码,发现有个地方给textarea监听了input、propertychange事件,目的是使输入内容变多的时候textarea能自动撑开,里面设置了height属性为auto。不确定是不是这段逻辑的影响。改了一下,去掉css('height', 'auto'),并等待页面加载完毕后再执行此逻辑,结果光标问题消息了(计数使用的还是input监听)。
由此可见,css('height', ‘auto’)会影响textarea光标位置。原理我还是不太明白╮(╯╰)╭哎