html - 如何在使用 CSS 的文本之前在文本区域内保留一些具有特定尺寸的空间？

Question

我有一个<textarea>. 它有一些特定的大小，比如 400px X 400px。我可以在里面打字。但是我应该可以在留出一些空间后打字，如果我清除文本，光标应该停在那里，比如使用退格键。

下面是一张图片，显示了我想说的话；

它就像一个 div 里面的一个 div。文本不应出现在橙色空间上。这并不意味着 div 可以充当叠加层，以便文本可以保留在其下方。这不是简单的覆盖问题。如何单独使用 HTML 和 CSS 来做到这一点？

Answer 1

您可以尝试使用HTML5 ContentEditable.

HTML 代码

<div id='wrapper'>
    <div id='box'></div>
    <div contenteditable='true' id='edit'>
    </div>
</div>

CSS 代码

#box {
    background-color : orange;
    width : 100px;
    height : 100px;
    float : left;
    margin : 0 10px 10px 0;
}
#wrapper {
    border : 1px solid red;
    padding : 10px;
}
#edit {
    height : 300px;
}

JSFiddle 演示：http: //jsfiddle.net/6gkHV/2/

看看这是否有帮助。