textarea不寻常的形状？
textareas通常是矩形或正方形，如下所示：
但是我想要一个像这样的自定义形状的textarea，例如：
这怎么可能？
介绍
首先，其他职位提出了很多解决scheme。 我认为目前这个版本（在2013年）可以兼容最多的浏览器，因为它不需要任何CSS3属性。 但是，这种方法不适用于不支持 contentdeditable 浏览器 ，要小心。
解决scheme与div contenteditable
正如@Getz所提出的那样 ，你可以使用带有contenteditable的div，然后用一些div对其进行整形。 下面是一个例子，其中两个块在主div的左上angular和右上angular浮动：
正如你所看到的，如果你想得到和你在post中所要求的结果相同的结果，你就必须边玩边框 。 主要的div有每边的蓝色边框。 接下来，必须粘贴红色块来隐藏主div的顶部边框，并且只需要在特定的一侧（ 左下angular为右侧块， 左侧为底部，右侧为左侧）应用边框。
之后，您可以通过Javascript获取内容，例如触发“ 提交 ”button。 我想你也可以处理其余的CSS（ font-size ， color等）:)
完整的代码示例
.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>
在不久的将来，我们可以使用所谓的css-shapes来实现这一点。 将contenteditable属性设置为true并与css-shapes结合的div可以使文本区域具有任何形状。
目前Chrome Canary已经支持 css-shapes 。 一个例子可能与CSS形状是：
这里他们使用多边形的形状来定义文本stream。 应该可以创build两个多边形来匹配你想要的textarea的形状。
有关css-shapes更多信息，请参阅http://sarasoueidan.com/blog/css-shapes/
在Chrome Canary中启用css-shapes：
- 将chrome：// flags /＃enable-experimental-web-platform-features复制并粘贴到地址栏中，然后按回车键。
- 点击该部分中的“启用”链接。
点击浏览器窗口底部的“立即重新启动”button。
来自： http : //html.adobe.com/webplatform/enable/
.container { overflow: hidden; shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px); font-size: 0.8em; } /** for red border **/ .container:before { content: ''; position: absolute; top: 8px; left: 8px; width: 190px; height: 190px; background-color: white; border-right: 1px solid red; border-bottom: 1px solid red; } .container:after { content: ''; position: absolute; top: 8px; right: 8px; width: 190px; height: 190px; background-color: white; border-left: 1px solid red; border-bottom: 1px solid red; }
<div class="container" contenteditable="true"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu. </div>
也许这是可能的内容编辑 ？
这不是一个textarea，但如果你成功地创build一个这种形状的div，它可以工作。
我认为只有textarea是不可能的
一个小例子： http : //jsfiddle.net/qgfP6/5/
<div contenteditable="true"> </div>
你可以用一个可以理解的div来工作，有两个div div：
<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true"> <div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div> <div style="float:right; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div> hello world, hello worldsdf asdf asdf sdf asdf asdf </div>
你也可以用CSS Regions来做到这一点
通过Regions，您可以使用CSS属性将内容stream入现有的样式容器，指定您select的任何容器订单，而不pipe其在页面上的位置。
（networking平台）
[目前在WebKit Nightly，Safari 6.1及iOS7中支持，并且在启用标志后已经可用于Chrome和Opera：enable-experimental-web-platform-features – caniuse ， Web Platform ]
小提琴
所以你可以使文本通过2个区域的文本区域形状，并通过添加contenteditable内容进行编辑。
标记
<div id="box-a" class="region"></div> <div id="box-b" class="region"></div> <div id="content" contenteditable>text here</div>
（相关）CSS
#content { -ms-flow-into: article; -webkit-flow-into: article; } .region { -ms-flow-from: article; -webkit-flow-from: article; box-sizing: border-box; position: absolute; width: 200px; height: 200px; padding: 0 1px; margin: auto; left:0;right:0; border: 2px solid lightBlue; } #box-a { top: 10px; background: #fff; z-index: 1; border-bottom: none; } #box-b { top: 210px; width: 400px; overflow: auto; margin-top: -2px; }
结果：
有关地区的更多信息 – 这里有一个很好的例子： CSS3地区：丰富的HTML和CSS3页面布局
在框中的一长串文本将光标放下中间的边缘，我似乎无法修复。
**[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 AB Cs</span> </div> </div>
这是不可能的父亲！ textarea通常是一个矩形框，您可以在其中键入。
然而，要做出这样的事情，你可以使用2 textarea的，然后给他们指定的宽度和高度。 否则，我不认为它会发生！
第二种方法是创build一个可编辑的元素。
http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/
代码是：
<div contenteditable="true"> This text can be edited by the user. </div>
使用这个，你可以使任何元素可编辑！ 你可以给它维度，它会起作用！ 你会得到它只是一个textarea。
参考： https ： //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
如果将CSS形状与contenteditable结合使用，则可以在webkit浏览器中完成。
首先你必须启用flag：enable-experimental-web-platform-features
然后重新启动你的webkit浏览器，然后检查这个FIDDLE了！
这种方法也适用于非标准的形状。
标记
<div class="shape" contenteditable="true"> <p> Text here </p> </div>
CSS
.shape{ -webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px); shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px); width: 400px; height: 400px; text-align: justify; margin: 0 auto; }
那么我究竟是怎么得到这个多边形的？
去这个网站 ，并使自己的自定义形状！
关于启用标志的注意事项:(从这里开始 ）
要启用形状，区域和混合模式：
将chrome：// flags /＃enable-experimental-web-platform-features复制并粘贴到地址栏中，然后按回车键。 点击该部分中的“启用”链接。 点击浏览器窗口底部的“立即重新启动”button。
您可以使用Google网页devise工具使用HTML5-canvas and CSS创build复杂的形状。
你会得到更多的工具，如打字工具，在这些形状内input文字。
由于输出文件包含许多代码，因此可以使用Google Web Designer工具创build示例演示的小提琴
FIDDLE DEMO >>
如果出于任何原因，你确实需要支持那些没有contenteditable浏览器，那么你可以用JavaScript做同样的事情，尽pipe这是一个非常混乱的解决方法。
伪代码：
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; } }
