Обычно текстовые области имеют прямоугольную или квадратную форму, например:

Но я хочу текстовую область нестандартной формы, например, такую:

Как это возможно?

Введение

Во-первых, есть много решений, предложенных в других постах. Я думаю, что это в настоящее время (в 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>

В ближайшее время мы можем использовать так называемые css-shapesдля достижения этой цели. Div с contenteditableатрибутом, установленным в trueсочетании с, css-shapesможет сделать текстовую область любой формой.

В настоящее время Chrome Canary уже поддерживает css-shapes . Пример того, что возможно с css-shape:

Здесь они используют форму многоугольника для определения потока текста. Должно быть возможно создать два полигона, чтобы соответствовать форме, которую вы хотите для своей текстовой области.

Более подробная информация о css-shapesбыла написана на: http://sarasoueidan.com/blog/css-shapes/

Чтобы включить CSS-формы в Chrome Canary:

1. Скопируйте и вставьте chrome: // flags / # enable-эксперимент-web-platform-features в адресную строку и нажмите клавишу ввода.
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/

Может быть, это возможно с Content Editable ?

Это не текстовая область, но если вам удастся создать div с этой формой, это может сработать.

Я думаю, что это невозможно только с помощью textarea ...

Небольшой пример: http://jsfiddle.net/qgfP6/5/

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

Вы можете работать с 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>

Вы также можете сделать это с помощью CSS Regions

С помощью Regions вы можете использовать свойства CSS для передачи содержимого в существующие стилизованные контейнеры, указав любой порядок контейнеров, который вы выберете, независимо от их положения на странице.

(Веб-платформа)

[В настоящее время поддерживается в WebKit Nightly, Safari 6.1+ и iOS7 и уже может использоваться в Chrome и Opera после включения флага: enable-эксперимент-web-platform-features - caniuse , Web Platform ]

FIDDLE

Таким образом, вы можете придать текстовой форме форму, пропустив текст через 2 области, и отредактировать его, добавив 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;
}

Результат:

Для получения дополнительной информации о регионах - вот хорошая статья: регионы CSS3: богатый макет страницы с HTML и CSS3

Длинная строка текста в поле будет опускать курсор за средние края, и я не могу это исправить.

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

Это невозможно, сир! Текстовая область, как правило, представляет собой прямоугольник или квадрат, где вы можете ввести.

Однако, чтобы сделать что-то подобное, вы можете использовать 2 текстовые области, а затем дать им указанную ширину и высоту. В противном случае я не думаю, что это произойдет!

Второй способ - сделать редактируемый элемент.

http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/

Код является:

<div contenteditable="true">
   This text can be edited by the user.
</div>

Используя это, вы можете сделать любой элемент редактируемым! Вы можете дать размеры, и это будет работать! Вы получите это как текстовую область.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Если вы комбинируете формы CSS с contenteditableэтим, это можно сделать в браузерах webkit.

Сначала вы должны включить флаг: enable-экспериментальный-веб-платформа-функции

Затем перезапустите браузер 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;
}

Так как же я получил эту форму многоугольника?

Зайдите на этот сайт и создайте свою собственную форму!

Примечания о включении флага: ( отсюда )

Чтобы включить Shapes, Regions и Blend Mode:

Скопируйте и вставьте chrome: // flags / # enable-эксперимент-web-platform-features в адресную строку и нажмите клавишу ввода. Нажмите на ссылку «Включить» в этом разделе. Нажмите кнопку «Перезапустить сейчас» в нижней части окна браузера.

Вы можете использовать инструмент веб-дизайнера Google для создания сложных форм с помощью HTML5-canvas and CSS.

Более того, вы получите другие инструменты, такие как инструменты ввода текста для ввода текста внутри этих фигур.

Поскольку в выходном файле содержится много кода, можно использовать образец демонстрационного примера, созданного с помощью инструмента Google Web Designer.

FIDDLE DEMO >>

Если по какой-либо причине вам действительно требуется поддержка браузеров, которые не имеют contenteditable, вы, вероятно, могли бы сделать то же самое в JavaScript, используя события, хотя это очень грязный обходной путь.

псевдокод:

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