Необычная форма текстового поля?

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

Но мне нужна текстовая область в форме, например:

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

Ответ 1

Введение

Во-первых, существует множество решений, предложенных в других сообщениях. Я думаю, что в настоящий момент это (в 2013 году) тот, который может быть совместим с наибольшим количеством браузеров, потому что ему не нужны какие-либо свойства CSS3. Однако этот метод не будет работать в браузерах, которые не поддерживают contentdeditable, будьте осторожны.

Решение с помощью div `contenteditable`

Как было предложено @Getz, вы можете использовать div с contenteditable, а затем сформировать его с помощью некоторого div на нем. Вот пример с двумя блоками, которые плавают в верхнем левом углу и в правом верхнем углу главного 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>

Ответ 2

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

В настоящее время Chrome Canary уже поддерживает css-shapes. Пример, который возможен с помощью css-фигур:

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

Дополнительная информация о css-shapes написана по адресу: http://sarasoueidan.com/blog/css-shapes/

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

Скопировать и вставить chrome://flags/# enable-experimental-web-platform-features в адресную строку, затем нажмите клавишу ввода.

Нажмите ссылку "Включить" в пределах этого раздел.

Нажмите кнопку "Повторить сейчас" внизу браузера.

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>

Ответ 3

Возможно ли это с помощью Content Editable?

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

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

Маленький пример: http://jsfiddle.net/qgfP6/5/

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

Ответ 4

Вы можете работать с contenteditable div, с двумя углами 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>

Ответ 5

Вы также можете сделать это с помощью CSS-регионы

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

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

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

FIDDLE

Итак, вы можете сделать эту форму textarea, протекая текст через 2 области и отредактировать ее, добавив контент в контент.

Разметка

<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

Ответ 6

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

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

Ответ 7

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

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

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

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

Ответ 8

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

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

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

FIDDLE DEMO →

Ответ 9

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

Сначала вам нужно включить флаг: enable-experimental-web-platform-features

Затем перезагрузите браузер веб-браузера, а затем откройте 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;
}

Итак, как же я получил форму полигона?

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

Заметки о включении флага: (от здесь)

Чтобы включить режим Shape, Regions и Blend:

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

Ответ 10

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

Ответ 1

Введение

Решение с помощью div contenteditable

Полный пример кода

Ответ 2

Ответ 3

Ответ 4

Ответ 5

FIDDLE

Разметка

(Релевантно) CSS

Ответ 6

Ответ 7

Ответ 8

Ответ 9

Разметка

CSS

Ответ 10

Решение с помощью div `contenteditable`