首页 > 代码库 > 关于文本输入域首行缩进问题

关于文本输入域首行缩进问题

想实现的结果如下

起始状态

技术分享

输入状态

技术分享

图标放在首行,文字输入的时候刚好从图片右侧开始

想了几个方式

第一种:

 <div contenteditable="true"><img>请输入</div> 虽然提示文字可以用js处理,但问题是图片也可以删。pass

第二种:

<img><div contenteditable="true" style="text-indent:1px">请输入</div> img定位或者div加margin,样式倒是可以,问题是删除的时候光标可以删到图片前面,难看。pass

技术分享

第三种:

<img><textarea style="text-indent:1px"></textarea>图片用定位,然后textarea用text-indent,这样不仅可以用placeholder,光标删除的问题也解决了。

 

关于文本输入域首行缩进问题