如何拥有跨越多行的HTML输入？

Question

我正在尝试创建一个如下所示的用户体验：

基本上，有<span>个不可编辑的文字，后跟textarea / input和其他一些不可编辑的<span>s。当间隙的长度很短时，简单的textarea /输入没有问题，但是当它很长时，布局变得非常笨拙。我调查了contentEditable，但我不确定这是否是我需要的（我还读了几个posts暗示它是邪恶的）。

我还有其他选择吗？

Answer 1

您无法提供输入。

如果您遇到不同尺寸的布局问题，可以使用CSS查看media queries，这样您就可以在不同的视口尺寸下更改布局。

使用类似bootstrap的框架来帮助您布局网页可能更容易，但在我看来，像bootstrap这样的框架可能会开始干扰自定义设计，但这只会是一个问题当你有点经验时。

Answer 2

也许contentEditable属性可以帮助您。看看https://www.w3schools.com/JSREF/prop_html_contenteditable.asp

有一个典型的例子  https://www.w3schools.com/JSREF/tryit.asp?filename=try_dom_body_contenteditable

例如，您可以为跨度或内联div打开可编辑模式。