Unusual shape of a textarea?

Javascript Jquery Html Css

Javascript Problem Overview

Usually textareas are rectangular or square, like this:

Usual textarea

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

Custom-shaped textarea

How is this possible?

Javascript Solutions

Solution 1 - Javascript

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:

The result with Firefox 28

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>

Solution 2 - Javascript

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:

enter image description here

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

enter image description here

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

Solution 3 - Javascript

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>

Solution 4 - Javascript

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>

Solution 5 - Javascript

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)

enter image description here

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

enter image description here

For more info about regions - here's a good aricle: CSS3 regions: Rich page layout with HTML and CSS3

Solution 6 - Javascript

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/

Solution 7 - Javascript

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

Solution 8 - Javascript

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

Solution 9 - Javascript

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.

Solution 10 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Paranoid	View Question on Stackoverflow
Solution 1 - Javascript	Maxime Lorant	View Answer on Stackoverflow
Solution 2 - Javascript	Bas van Dijk	View Answer on Stackoverflow
Solution 3 - Javascript	Getz	View Answer on Stackoverflow
Solution 4 - Javascript	Gideon	View Answer on Stackoverflow
Solution 5 - Javascript	Danield	View Answer on Stackoverflow
Solution 6 - Javascript	Deryck	View Answer on Stackoverflow
Solution 7 - Javascript	Afzaal Ahmad Zeeshan	View Answer on Stackoverflow
Solution 8 - Javascript	Prasanth K C	View Answer on Stackoverflow
Solution 9 - Javascript	Danield	View Answer on Stackoverflow
Solution 10 - Javascript	user2947761	View Answer on Stackoverflow

Unusual shape of a textarea?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Introduction

Solution with a div `contenteditable`

Full code sample

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

FIDDLE

Markup

(Relevant) CSS

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Markup

CSS

Solution 10 - Javascript

What is the problem with shadowing names defined in outer scopes?

Object.getOwnPropertyNames vs Object.keys

Attributions

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Introduction

Solution with a div contenteditable

Full code sample

Solution 2 - Javascript

Solution 3 - Javascript

Solution 4 - Javascript

Solution 5 - Javascript

FIDDLE

Markup

(Relevant) CSS

Solution 6 - Javascript

Solution 7 - Javascript

Solution 8 - Javascript

Solution 9 - Javascript

Markup

CSS

Solution 10 - Javascript

What is the problem with shadowing names defined in outer scopes?

Object.getOwnPropertyNames vs Object.keys

Attributions

Solution with a div `contenteditable`