通常文本区域是矩形或正方形，就像这样:
但我想要一个自定义形状的文本区域，就像这样，例如:
这怎么可能呢?
当前回答
您可以使用谷歌网页设计工具使用HTML5-canvas和CSS创建复杂的形状。
更多的是，你会得到其他工具，如键入工具，在这些形状中输入文本。
由于输出文件包含大量代码，提供了一个使用谷歌Web Designer工具创建的示例演示
小提琴演示> >
其他回答
您可以使用谷歌网页设计工具使用HTML5-canvas和CSS创建复杂的形状。
更多的是，你会得到其他工具，如键入工具，在这些形状中输入文本。
由于输出文件包含大量代码，提供了一个使用谷歌Web Designer工具创建的示例演示
小提琴演示> >
文本框中的长行文本会使光标下降到中间边缘，我似乎无法修复这个问题。
**[Fiddle Diddle][1]**
#wrap { overflow: hidden; } #inner { height: 350px; width: 500px; border: 1px solid blue; } #textContent { word-wrap: break-word; word-break: break-all; white-space: pre-line; } #left, #right { height: 50%; width: 25%; margin-top: -1px; padding: 0; border: 1px solid blue; border-top-color: white; margin-bottom: 5px; } #right { margin-left: 5px; float: right; margin-right: -1px; border-right-color: white; } #left { margin-right: 5px; float: left; margin-left: -1px; border-left-color: white; } <div id="wrap"> <div id="inner"> <div id="left"></div> <div id="right"></div> <span id="textContent" contenteditable>The A B Cs</span> </div> </div>
[1]: http://jsfiddle.net/yKSZV/
也许这是可能的内容编辑?
它不是一个文本区域，但如果你成功地用这个形状创建了一个div，它就可以工作。
我认为这是不可能的只有textarea…
一个小例子:http://jsfiddle.net/qgfP6/5/
<div contenteditable="true">
</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;
}
}
这是不可能的，陛下!文本区域通常是一个矩形或方形框，您可以在其中输入。
然而，要做出这样的东西，你可以使用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
