javascript 文本区域的不寻常形状？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20728150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unusual shape of a textarea?
提问by Paranoid
Usually textareas are rectangular or square, like this:
通常 textareas 是矩形或正方形，像这样：
But I want a custom-shaped textarea, like this, for example:
但我想要一个自定义形状的文本区域，例如：
How is this possible?
这怎么可能？
采纳答案by Maxime Lorant
Introduction
介绍
First, there are many solutions, proposed in other posts. I think this one is currently (in 2013) the one which can be compatible with the largest number of browsers, because it doesn't need any CSS3 properties. However, the method will not work on browsers which doesn't supportcontentdeditable, be careful.
首先，有很多解决方案，在其他帖子中提出。我认为这是目前（2013 年）可以兼容最多浏览器的一种，因为它不需要任何 CSS3 属性。但是，该方法不适用于不支持 的浏览器contentdeditable，请注意。
Solution with a div contenteditable
用div解决 contenteditable
As proposed by @Getz, you can use a div with contenteditableand then shape it with some div on it. Here is an example, with two blocks which float at the upper left and the upper right of the main div:
正如@Getz所提议的，您可以使用 divcontenteditable并在其上添加一些 div 对其进行整形。这是一个示例，其中有两个块漂浮在主 div 的左上角和右上角：
As you can see, you have to play a little with the bordersif you want the same result as you requested in your post. The main div has the blue border on every side. Next, red blocks has to be sticked to hide top borders of the main div, and you need to apply border to them only on particular sides (bottom and leftfor the right block, bottom and rightfor the left).
如您所见，如果您想要与您在帖子中要求的结果相同的结果，则必须稍微调整一下边框。主 div 的每一侧都有蓝色边框。接下来，必须粘贴红色块以隐藏主 div 的顶部边框，并且您只需要在特定边（底部和左侧为右侧块，底部和右侧为左侧）为它们应用边框。
After that, you can get the content via Javascript, when the "Submit" button is triggered for example. And I think you can also handle the rest of the CSS (font-size, color, etc.) :)
之后，您可以通过 Javascript 获取内容，例如，当“提交”按钮被触发时。我想你也可以处理CSS（其余font-size，color等等）:)
Full code sample
完整代码示例
.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>回答by Bas van Dijk
In the near future we can use so called css-shapesto achieve this. A div with the contenteditableattribute set to truecombined with css-shapescan make a text area any kind of shape.
在不久的将来，我们可以使用所谓的css-shapes来实现这一点。contenteditable属性设置为true组合的divcss-shapes可以使文本区域成为任何类型的形状。
Currently Chrome Canary already supportscss-shapes. An example what is possible with css-shapes is:
目前 Chrome Canary 已经支持css-shapes. css-shapes 的一个例子是：
Here they are using a polygon shape to define the text-flow. It should be possible to create two polygons to match the shape you want for your textarea.
在这里，他们使用多边形来定义文本流。应该可以创建两个多边形来匹配文本区域所需的形状。
More information about css-shapeshas been written at: http://sarasoueidan.com/blog/css-shapes/
有关的更多信息css-shapes已写在：http: //sarasoueidan.com/blog/css-shapes/
To enable css-shapes in Chrome Canary:
- Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
- Click the 'Enable' link within that section.
Click the 'Relaunch Now' button at the bottom of the browser window.
要在 Chrome Canary 中启用 css-shapes：
- 将 chrome://flags/#enable-experimental-web-platform-features 复制并粘贴到地址栏中，然后按 Enter。
- 单击该部分中的“启用”链接。
单击浏览器窗口底部的“立即重新启动”按钮。
.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>Polygon created with: http://betravis.github.io/shape-tools/polygon-drawing/
创建的多边形：http: //betravis.github.io/shape-tools/polygon-drawing/
Result
结果
回答by Getz
Maybe it's possible with Content Editable?
也许可以使用Content Editable？
It's not a textarea, but if you succeed to create a div with this shape, it could work.
它不是一个 textarea，但如果你成功地用这个形状创建了一个 div，它就可以工作。
I think it's not possible with just textarea...
我认为仅使用 textarea 是不可能的...
A little example: http://jsfiddle.net/qgfP6/5/
一个小例子：http: //jsfiddle.net/qgfP6/5/
<div contenteditable="true">
</div>
回答by Gidon
You could work with a contenteditable div, with two corners divs:
您可以使用具有两个角的 div 的 contenteditable 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>
回答by Danield
You could also do this with CSS Regions
你也可以用CSS Regions做到这一点
With Regions, you can use CSS properties to flow content into existing styled containers, specifying any container order you choose, regardless of their position on the page.
通过区域，您可以使用 CSS 属性将内容流入现有样式容器，指定您选择的任何容器顺序，而不管它们在页面上的位置。
[Currently supported in WebKit Nightly, Safari 6.1+ and iOS7 and already usable in chrome and opera after enabling the flag: enable-experimental-web-platform-features - caniuse, Web Platform]
[目前在 WebKit Nightly、Safari 6.1+ 和 iOS7 中支持，并且在启用标志后已经可以在 chrome 和 Opera 中使用： enable-experimental-web-platform-features - caniuse, Web Platform]
FIDDLE
小提琴
So you could make that textarea shape by flowing the text through 2 regions, and edit it by adding contenteditable on the content.
因此，您可以通过将文本流过 2 个区域来制作该 textarea 形状，并通过在内容上添加 contenteditable 来编辑它。
Markup
标记
<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>
(Relevant) CSS
（相关）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;
}
The result:
结果：
For more info about regions - here's a good aricle: CSS3 regions: Rich page layout with HTML and CSS3
有关区域的更多信息 - 这里有一篇很好的文章：CSS3 区域：使用 HTML 和 CSS3 的丰富页面布局
回答by Deryck
A long line of text in the box will drop the cursor down past the middle edges and I can't seem to fix that.
框中的一长行文本会将光标向下移到中间边缘，我似乎无法解决这个问题。
**[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/
回答by Afzaal Ahmad Zeeshan
That's not possible sire! A textarea is generally a rect or square box, where you can type in.
少爷这不可能！文本区域通常是一个矩形或方形框，您可以在其中输入。
However, to make something like that you can use 2 textarea's and then give them a specified width and height. Otherwise I don't think its gonna happen!
但是，要制作类似的东西，您可以使用 2 个 textarea，然后为它们指定指定的宽度和高度。否则我认为它不会发生！
Second method would be to make an editable element.
第二种方法是制作一个可编辑的元素。
http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/
http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/
The code is:
代码是：
<div contenteditable="true">
This text can be edited by the user.
</div>
Using this, you can make any element editable! You can give dimensions to it, and it will work! You will get it just as a textarea.
使用它，您可以使任何元素可编辑！你可以给它尺寸，它会起作用！你会得到它就像一个文本区域。
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
参考：https: //developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
回答by Prasanth K C
You can use Google web designer toolfor creating complex shapes using HTML5-canvas and CSS.
您可以使用Google 网页设计器工具使用HTML5-canvas and CSS.
More over you will get other tools like typing tools to enter texts inside these shapes.
更重要的是，您将获得其他工具，例如在这些形状中输入文本的打字工具。
As the output file contains much code, providing a fiddle of a sample demo created using Google Web Designer tool
由于输出文件包含大量代码，提供使用Google Web Designer 工具创建的示例演示的小提琴
回答by Danield
If you combine CSS shapeswith contenteditablethis can be done in webkit browsers.
如果您将CSS 形状与contenteditable此结合，则可以在 webkit 浏览器中完成。
First you have to enable the flag: enable-experimental-web-platform-features
首先，您必须启用该标志： enable-experimental-web-platform-features
Then restart your webkit browser and then check this FIDDLEout !
然后重新启动您的 webkit 浏览器，然后检查这个FIDDLE！
This method will work for non-standard shapes as well.
此方法也适用于非标准形状。
Markup
标记
<div class="shape" contenteditable="true">
<p>
Text here
</p>
</div>
CSS
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;
}
So how on earth did I get that polygon shape?
那么我到底是怎么得到那个多边形的呢？
Go to this siteand make your own custom shape!
访问此站点并制作您自己的自定义形状！
Notes about enabling the flag: (from here)
关于启用标志的注意事项：（来自此处）
To enable Shapes, Regions, and Blend Modes:
Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter. Click the 'Enable' link within that section. Click the 'Relaunch Now' button at the bottom of the browser window.
要启用形状、区域和混合模式：
将 chrome://flags/#enable-experimental-web-platform-features 复制并粘贴到地址栏中，然后按 Enter。单击该部分中的“启用”链接。单击浏览器窗口底部的“立即重新启动”按钮。
回答by Danield
If, for whatever reason, you really need to support browsers that don't have contenteditable, you could probably do the same thing in JavaScript, by using events, although this is a very messy workaround.
如果，无论出于何种原因，您确实需要支持没有 的浏览器contenteditable，您可能可以在 JavaScript 中通过使用事件来做同样的事情，尽管这是一个非常麻烦的解决方法。
Pseudocode:
伪代码：
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;
}
}
