admin管理员组

文章数量:1128540

Usually textareas are rectangular or square, like this:

But I want a custom-shaped textarea, like this, for example:

How is this possible?

Usually textareas are rectangular or square, like this:

But I want a custom-shaped textarea, like this, for example:

How is this possible?

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Dec 24, 2013 at 18:50 Ry-♦ 225k5656 gold badges488488 silver badges497497 bronze badges asked Dec 22, 2013 at 9:53 ParanoidParanoid 1,92355 gold badges1616 silver badges1717 bronze badges 16

• 45 Welcome to the most overused web trope for the next three years! – l0b0 Commented Dec 22, 2013 at 18:24
• 24 Completely unrelated: May I ask what context you're planning to use this in? I mean, I can't really figure a scenario in which this would be useful, so I'd like some inspiration on that. – user98085 Commented Dec 22, 2013 at 22:38
• 23 Everybody is missing a critical problem. Using a <div> to store text is not a good solution. It may help design, and might even be acceptable for read-only text (which completely defeats the purpose of contenteditable), but it’s not good for text input from a user. A div (even a contenteditable one) is not a standard input element like a normal form element, therefore, it will not be treated like one, and so its contents will not be saved by browsers in case of crashes. Using a div leads to data-loss. See this example. – Synetech Commented Dec 23, 2013 at 19:42
• 3 Actually this should be closed as "Demonstrated a minimal understanding of the problem being solved" – Mr. Alien Commented Dec 26, 2013 at 6:16
• 9 So, where do you want to see the vertical scrollbar? – Rob W Commented Dec 26, 2013 at 14:34

 |  Show 11 more comments

10 Answers 10

Sorted by: Reset to default 264 +50

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 support contentdeditable, be careful.

Solution with a div contenteditable

As proposed by @Getz, you can use a div with contenteditable and 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:

As you can see, you have to play a little with the borders if 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 left for the right block, bottom and right for the left).

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

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>

In the near future we can use so called css-shapes to achieve this. A div with the contenteditable attribute set to true combined with css-shapes can make a text area any kind of shape.

Currently Chrome Canary already supports css-shapes. An example what is possible with css-shapes is:

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-shapes has been written at: http://sarasoueidan.com/blog/css-shapes/

To enable css-shapes in Chrome Canary:

1. Copy and paste chrome://flags/#enable-experimental-web-platform-features into the address bar, then press enter.
2. Click the 'Enable' link within that section.

3. Click the 'Relaunch Now' button at the bottom of the browser window.

   from: 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>

Polygon created with: http://betravis.github.io/shape-tools/polygon-drawing/

Result

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

Maybe it's possible with Content Editable ?

It's not a textarea, but if you succeed to create a div with this shape, it could work.

I think it's not possible with just textarea...

A little example: http://jsfiddle.net/qgfP6/5/

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

You could work with a contenteditable div, with two corners divs:

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

You could also do this with 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.

(Web Platform)

[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 ]

FIDDLE

So you could make that textarea shape by flowing the text through 2 regions, and edit it by adding contenteditable on the content.

Markup

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

(Relevant) 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

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/

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!

Second method would be to make an editable element.

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

If you combine CSS shapes with contenteditable this can be done in webkit browsers.

First you have to enable the flag: enable-experimental-web-platform-features

Then restart your webkit browser and then check this FIDDLE out !

This method will work for non-standard shapes as well.

Markup

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

So how on earth did I get that polygon shape?

Go to this site and 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.

You can use Google web designer tool for creating complex shapes using 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

FIDDLE DEMO>>

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.

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

本文标签： javascriptUnusual shape of a textareaStack Overflow