Unusual shape of a textarea?

Question

Usually textareas are rectangular or square, like this:

But I want a custom-shaped

Answer 1

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/

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

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

Answer 6

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/