不寻常的textarea形状？

Question

通常textareas是矩形或方形,如下所示:

但我想要一个自定义形状的textarea,例如:

这怎么可能？

Answer 1

介绍

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

解决方案与div contenteditable

正如@Getz所提出的那样,你可以使用div contenteditable然后用它上面的div来塑造它.这是一个例子,有两个块浮动在主div的左上角和右上角:

正如您所看到的,如果您想要与帖子中请求的结果相同,则必须使用边框.主要部分的每一边都有蓝色边框.接下来,必须粘贴红色块以隐藏主div的顶部边框,并且您需要仅在特定边上应用边框(右侧块的底部和左侧,左侧的底部和右侧).

之后,例如,当触发" 提交 "按钮时,您可以通过Javascript获取内容.我想你也可以处理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>

Answer 2

在不久的将来,我们可以使用所谓css-shapes的实现这一点.将contenteditable属性设置为true组合的div css-shapes可以使文本区域成为任何形状.

目前Chrome Canary已经支持 css-shapes.css-shapes可能的一个例子是:

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

有关的更多信息,请css-shapes访问:http://sarasoueidan.com/blog/css-shapes/

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

1. 将chrome:// flags/#enable-experimental-web-platform-features复制并粘贴到地址栏中,然后按Enter键.
2. 点击该部分中的"启用"链接.

3. 单击浏览器窗口底部的"立即重新启动"按钮.

   来自: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/

结果

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

Answer 3

也许内容可编辑是可能的？

它不是textarea,但是如果你成功创建了一个具有这种形状的div,它就可以工作了.

我认为只有textarea才有可能......

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

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

Answer 4

你可以使用一个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>

Answer 5

您也可以使用CSS区域执行此操作

使用Regions,您可以使用CSS属性将内容流式传输到现有样式容器,指定您选择的任何容器顺序,而不管它们在页面上的位置如何.

(网络平台)

[目前支持WebKit Nightly,Safari 6.1+和iOS7,并且在启用标志后已经可用于chrome和opera:enable-experimental-web-platform-features - caniuse,Web Platform ]

小提琴

因此,您可以通过将文本移动到2个区域来制作textarea形状,并通过在内容上添加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;
}

结果:

有关区域的更多信息 - 这是一个很好的aricle:CSS3区域:使用HTML和CSS3的丰富页面布局

Answer 6

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

**[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/

Answer 7

这不可能是父亲!textarea通常是一个矩形或方形框,您可以在其中键入.

但是,要制作类似的东西,你可以使用2 textarea's然后给它们指定的宽度和高度.否则我不认为它会发生!

第二种方法是制作可编辑的元素.

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

Answer 8

您可以使用Google网页设计工具来创建复杂的形状HTML5-canvas and CSS.

除此之外,您将获得其他工具,例如键入工具以在这些形状内输入文本.

由于输出文件包含很多代码,因此提供了使用Google Web Designer工具创建的示例演示的小提琴

FIDDLE DEMO >>

Answer 9

如果将CSS形状与contenteditable此结合使用,可以在webkit浏览器中完成.

首先,您必须启用标志: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复制并粘贴到地址栏中,然后按Enter键.点击该部分中的"启用"链接.单击浏览器窗口底部的"立即重新启动"按钮.