如何獲得跨越多行的HTML輸入？

Question

我試圖創建一個類似如下的用戶體驗：

本質上說，不可編輯的文本，然後一個textarea /輸入等一些不可編輯<span>s的<span>。當缺口長度很短時，一個簡單的textarea /輸入不會造成問題，但當它很長時，佈局變得非常笨拙。我已經看過contentEditable，但我不確定它是否是我需要的（我也讀過幾個posts表明它是邪惡的）。

我還有其他的選擇嗎？

Answer 1

也許contentEditable屬性可以幫助你。這裏有https://www.w3schools.com/JSREF/prop_html_contenteditable.asp

一看有一個tipical例如 https://www.w3schools.com/JSREF/tryit.asp?filename=try_dom_body_contenteditable

您可以可編輯模式切換針對跨距或內聯DIV，例如。

Answer 2

根據您的建議，無法輸入輸入。

如果您在使用不同尺寸的佈局時遇到問題，請使用CSS查看media queries，這將允許您在不同的視口尺寸下更改佈局。

您可能更容易使用像bootstrap這樣的框架來幫助您佈置網頁，儘管在我看來，像bootstrap這樣的框架可能會開始干擾定製設計，但這隻會是一個問題，當您多一點經驗。