文本区域的不寻常形状？介绍带 div 的解决方案contenteditable 完整代码示例

javascript jquery html css

2022-08-30 00:16:55

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

Usual textarea

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

Custom-shaped textarea

这怎么可能？

答案 1

介绍

首先，有很多解决方案，在其他帖子中提出。我认为这个是目前（在2013年）可以与最多数量的浏览器兼容的浏览器，因为它不需要任何CSS3属性。但是，该方法不适用于不支持的浏览器，请注意。contentdeditable

带 div 的解决方案`contenteditable`

正如@Getz所建议的那样，您可以使用一个 div，然后用一些 div 来塑造它。下面是一个示例，其中有两个块浮动在主 div 的左上角和右上角：contenteditable

The result with Firefox 28

如您所见，如果您希望获得与帖子中要求相同的结果，则必须对边框进行一些调整。主 div 的每一侧都有蓝色边框。接下来，必须粘贴红色块以隐藏主div的顶部边框，并且您需要仅在特定侧面（右块的底部和左侧，左侧的底部和右侧）对它们应用边框。

之后，您可以通过Javascript获取内容，例如，当触发“提交”按钮时。我认为你也可以处理CSS的其余部分（，等）:)font-sizecolor

完整代码示例

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

答案 2

在不久的将来，我们可以使用所谓的来实现这一目标。将属性设置为与之组合的 div 可以使文本区域成为任何类型的形状。css-shapescontenteditabletruecss-shapes

目前Chrome Canary已经支持。使用 css 形状可以实现的一个示例是：css-shapes

enter image description here

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

更多信息已写在： http://sarasoueidan.com/blog/css-shapes/css-shapes

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

chrome://flags/#enable-experimental-web-platform-features 复制并粘贴到地址栏中，然后按 Enter 键。

点击该部分中的“启用”链接。

单击浏览器窗口底部的“立即重新启动”按钮。

从： 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>

创建时的多边形：http://betravis.github.io/shape-tools/polygon-drawing/

结果

enter image description here

http://jsfiddle.net/A8cPj/1/