div模拟textarea

可以使用contenteditable属性来实现div模拟textarea的效果，代码如下：

<div contenteditable="true"></div>

通过设置contenteditable属性为true，使得该div可以被编辑，从而模拟出textarea的效果。需要注意的是，由于div的高度不会自动随着内容的增加而增加，因此需要通过CSS设置其高度或使用JavaScript动态调整高度。

相关问题

textarea换行段落缩进

根据提供的引用内容，可以使用以下两种方法实现textarea的换行和段落缩进：

方法一：使用div来模拟textarea
这种方法通过使用div元素来模拟textarea，可以使用CSS的white-space属性来控制文字的换行和段落缩进。例如，设置white-space属性为pre-wrap可以实现文字的自动换行，设置text-indent属性可以实现段落缩进。这样，在div中输入的文字就能够实现换行和段落缩进的效果。

方法二：利用JS控制textarea的高度
这种方法通过使用JavaScript来控制textarea的高度，实现文字的换行和段落缩进。可以监听textarea的输入事件，当输入的文字超过一行或者输入Enter时，通过改变textarea的高度来实现自适应效果。具体实现步骤可以参考引用中给出的示例。

综上所述，可以通过使用div来模拟textarea或者利用JS控制textarea的高度来实现文字的换行和段落缩进效果。具体选择哪种方法取决于具体的需求和项目要求。

textarea内容贴边

回答: 根据你提供的引用内容，你遇到的问题是关于textarea内容贴边的。你尝试了一些方法来解决这个问题。首先，你尝试使用CSS样式来去掉textarea右下角的拖拽区的边框，但是发现在出现滚动条后进行拖拽时整个区域消失了。然后，你尝试使用::-webkit-scrollbar-corner来模拟resize的两条杠，但是在滚动条消失后又消失了。最后，你使用了一个比较低级的方法，通过给textarea套上一个div，并使用div的伪元素来遮住边线，成功解决了这个问题。\[1\]

另外，你还提到了获取光标位置的问题。你使用了ref来获取textarea的标签元素，并通过selectionStart和selectionEnd属性来获取光标的开始和结束位置。这样可以在进行内容插入时准确获取光标的位置。\[2\]

最后，你还提供了一段普通滚动条样式的代码，其中包括整体样式、滚动条内部小方块的样式和滚动条内部轨道的样式。这些样式可以用来自定义滚动条的外观。\[3\]

综上所述，你遇到的问题是关于textarea内容贴边的，你尝试了多种方法来解决这个问题，并最终通过给textarea套上一个div并使用div的伪元素来遮住边线的方式解决了问题。同时，你还提供了获取光标位置和自定义滚动条样式的相关信息。希望这些信息对你有帮助。
#### 引用[.reference_title]
- *1* *3* [自定义滚动条后textarea resize拖拉位置出现边框](https://blog.csdn.net/weixin_41552521/article/details/106566637)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Textarea-光标-有趣的实践](https://blog.csdn.net/qq_36523196/article/details/130263750)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]