简介

首先，在其他文章中提出了许多解决方案。我认为这是目前(2013年)可以与最多数量的浏览器兼容的一个，因为它不需要任何CSS3属性。但是，该方法在不支持contentdeditable的浏览器上不起作用，请小心。

用一个div来解决

正如@Getz所提议的，你可以使用一个带contentteditable的div，然后用一些div来塑造它。下面是一个例子，有两个块浮动在主div的左上方和右上方:

正如你所看到的，如果你想要得到和你在帖子中要求的相同的结果，你必须对边界进行一些处理。主div的每一面都有蓝色边框。接下来，红色块必须隐藏主div的顶部边界，你只需要在特定的方面应用边界(底部和左边为右块，底部和右边为左块)。

之后，你可以通过Javascript获取内容，例如当“提交”按钮被触发时。而且我认为你也可以处理CSS的其余部分(字体大小，颜色等):)

完整的代码示例

.block_left { background-color: red; height: 70px; width: 100px; float: left; border-right: 2px solid blue; border-bottom: 2px solid blue; } .block_right { background-color: red; height: 70px; width: 100px; float: right; border-left: 2px solid blue; border-bottom: 2px solid blue; } .div2 { background-color: white; font-size: 1.5em; border: 2px solid blue; } .parent { height: 300px; width: 500px; } <div class="parent"> <div class="block_left"></div> <div class="block_right"></div> <div class="div2" contenteditable="true"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..." </div> </div>

您可以使用谷歌网页设计工具使用HTML5-canvas和CSS创建复杂的形状。

更多的是，你会得到其他工具，如键入工具，在这些形状中输入文本。

由于输出文件包含大量代码，提供了一个使用谷歌Web Designer工具创建的示例演示

小提琴演示> >

这是不可能的，陛下!文本区域通常是一个矩形或方形框，您可以在其中输入。

然而，要做出这样的东西，你可以使用2个文本区域，然后给他们一个指定的宽度和高度。否则我不认为它会发生!

第二种方法是创建一个可编辑元素。

http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/

代码是:

<div contenteditable="true">
   This text can be edited by the user.
</div>

使用这个，你可以使任何元素可编辑!你可以给它一个维度，它会起作用的!你会得到它只是一个文本区域。

参考:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

也许这是可能的内容编辑?

它不是一个文本区域，但如果你成功地用这个形状创建了一个div，它就可以工作。

我认为这是不可能的只有textarea…

一个小例子:http://jsfiddle.net/qgfP6/5/

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

简介

首先，在其他文章中提出了许多解决方案。我认为这是目前(2013年)可以与最多数量的浏览器兼容的一个，因为它不需要任何CSS3属性。但是，该方法在不支持contentdeditable的浏览器上不起作用，请小心。

用一个div来解决

正如@Getz所提议的，你可以使用一个带contentteditable的div，然后用一些div来塑造它。下面是一个例子，有两个块浮动在主div的左上方和右上方:

正如你所看到的，如果你想要得到和你在帖子中要求的相同的结果，你必须对边界进行一些处理。主div的每一面都有蓝色边框。接下来，红色块必须隐藏主div的顶部边界，你只需要在特定的方面应用边界(底部和左边为右块，底部和右边为左块)。

之后，你可以通过Javascript获取内容，例如当“提交”按钮被触发时。而且我认为你也可以处理CSS的其余部分(字体大小，颜色等):)

完整的代码示例

.block_left { background-color: red; height: 70px; width: 100px; float: left; border-right: 2px solid blue; border-bottom: 2px solid blue; } .block_right { background-color: red; height: 70px; width: 100px; float: right; border-left: 2px solid blue; border-bottom: 2px solid blue; } .div2 { background-color: white; font-size: 1.5em; border: 2px solid blue; } .parent { height: 300px; width: 500px; } <div class="parent"> <div class="block_left"></div> <div class="block_right"></div> <div class="div2" contenteditable="true"> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..." </div> </div>

如果出于某种原因，您确实需要支持不具有contentteditable的浏览器，那么您可能可以在JavaScript中通过使用事件来完成同样的事情，尽管这是一种非常混乱的解决方法。

伪代码:

focused=false;
when user clicks the div
    {
    focused=true;
    }
when user clicks outside the div
    {
    focused=false;
    }
when user presses a key
    {
    if (focused)
    {
    add character of key to div.innerHTML;
    }
    }