Javascript 文本区域的不寻常形状？

文本区域通常为矩形或正方形，如下所示：

但我想要一个自定义形状的文本区域，例如：

---

这怎么可能呢？

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

然而，要制作这样的东西，您可以使用2个textarea，然后给它们指定宽度和高度。否则我认为这不会发生

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

代码是：

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

此文本可由用户编辑。

使用此选项，可以使任何元素都可编辑！你可以给它尺寸，它会工作的！你会得到它就像一个文本区

参考资料：

也许有可能

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

我认为这是不可能的，只有文本区域

举个小例子：

---

您可以使用contenteditable 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>

世界你好，世界你好sdf asdf asdf sdf asdf asdf

您可以使用使用

HTML5画布和CSS创建复杂形状

此外，您还可以使用其他工具（如键入工具）在这些形状中输入文本

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

导言
首先，在其他帖子中提出了许多解决方案。我认为这是目前（2013年）能够与最多浏览器兼容的浏览器，因为它不需要任何CSS3属性。但是，该方法在
contentdeditable
上不起作用，请小心

带有div的解决方案
contenteditable
按照的建议，您可以将div与
contenteditable
一起使用，然后使用一些div对其进行造型。下面是一个示例，两个块浮动在主div的左上角和右上角：


正如你所看到的，如果你想得到与你在帖子中要求的相同的结果，你必须稍微调整一下边框。主分区两边都有蓝色边框。接下来，必须粘贴红色块以隐藏主div的顶部边框，并且只需要在特定的边上对其应用边框（右块为底部和左侧，左侧为底部和右侧）

之后，您可以通过Javascript获取内容，例如，当触发“提交”按钮时。我认为您还可以处理CSS的其余部分（
字体大小
，
颜色
，等等）：

完整代码示例

.block\u左{
背景色：红色；
高度：70像素；
宽度：100px；
浮动：左；
右边框：2倍纯蓝；
底部边框：2件纯蓝；
}
.布洛克，对吗{
背景色：红色；
高度：70像素；
宽度：100px；
浮动：对；
左边框：2倍纯蓝色；
底部边框：2件纯蓝；
}
.第2分部{
背景色：白色；
字号：1.5em；
边框：2件纯蓝；
}
.家长{
高度：300px；
宽度：500px；
}

“Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua.ut…”
如果与
contenteditable
结合使用，这可以在webkit浏览器中完成

首先，您必须启用标志：启用实验性web平台功能

然后重新启动您的webkit浏览器，然后查看此信息

这种方法也适用于非标准形状

加成
那我到底是怎么得到那个多边形的

转到并制作您自己的自定义形状

关于启用标志的说明：
（来自）

要启用形状、区域和混合模式，请执行以下操作：

复制粘贴
chrome://flags/#enable-将实验性web平台功能引入
地址栏，然后按enter键。单击其中的“启用”链接
节。
单击浏览器底部的“立即重新启动”按钮
窗户

框中的一长行文本会将光标从中间边缘向下移动，我似乎无法解决这个问题

**[Fiddle Diddle][1]**


#换行{
溢出：隐藏；
}
#内在的{
高度：350px；
宽度：500px；
边框：1px纯蓝色；
}
#文本内容{
单词包装：打断单词；
单词break：打破一切；
空白：行前；
}
#左，#右{
身高：50%；
宽度：25%；
页边顶部：-1px；
填充：0；
边框：1px纯蓝色；
边框顶色：白色；
边缘底部：5px；
}
#对{
左边距：5px；
浮动：对；
右边距：-1px；
右边框颜色：白色；
}
#左{
右边距：5px；
浮动：左；
左边距：-1px；
左边框颜色：白色；
}

A B Cs
在不久的将来，我们可以使用所谓的
css形状来实现这一点。将
contenteditable
属性设置为
true
的div与
css shapes
相结合，可以生成任何形状的文本区域

目前Chrome Canary已经
css形状
。css形状的一个可能示例是：


在这里，他们使用多边形形状来定义文本流。应该可以创建两个多边形来匹配文本区域所需的形状

有关
css形状的更多信息，请访问：

要在Chrome Canary中启用css形状，请执行以下操作：

复制粘贴
chrome://flags/#enable-将实验性web平台功能引入
地址栏，然后按enter键
单击其中的“启用”链接
节
单击屏幕底部的“立即重新启动”按钮
浏览器窗口

发件人：


.container{
溢出：隐藏；
内部形状：多边形
 <div class="shape" contenteditable="true">
    <p>
     Text here
    </p>
  </div>

.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;
}

**[Fiddle Diddle][1]**

<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>

#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;
}

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;
    }
    }