Zazwyczaj pola tekstowe są prostokątne lub kwadratowe, takie jak to:

Ale chcę niestandardowego obszaru tekstowego, takiego jak na przykład:

Jak to jest możliwe?

Wprowadzenie

Po pierwsze, istnieje wiele rozwiązań zaproponowanych w innych postach. Myślę, że ten jest obecnie (w 2013 r.) Tym, który może być kompatybilny z największą liczbą przeglądarek, ponieważ nie wymaga żadnych właściwości CSS3. Jednak metoda nie będzie działać w przeglądarkach, które nie obsługują contentdeditable , bądź ostrożny.

Rozwiązanie z div contenteditable

Zgodnie z propozycją @Getz , możesz użyć div za pomocą, contenteditablea następnie ukształtować go za pomocą div. Oto przykład z dwoma blokami, które unoszą się w lewym górnym rogu i prawym górnym rogu głównego div:

Jak widać, musisz trochę pograć z granicami, jeśli chcesz uzyskać taki sam wynik, jak zażądałeś w swoim poście. Główny div ma po każdej stronie niebieską ramkę. Następnie należy przykleić czerwone bloki, aby ukryć górne granice głównej div, i musisz zastosować do nich obramowanie tylko po poszczególnych stronach ( dolny i lewy dla prawego bloku, dolny i prawy dla lewej).

Następnie możesz pobrać treść za pomocą Javascript, na przykład po naciśnięciu przycisku „ Prześlij ”. I myślę, że można także obsługiwać resztę (CSS font-size, coloretc.) :)

Pełna próbka kodu

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

W najbliższej przyszłości możemy użyć tzw css-shapes. Div z contenteditablezestawem atrybutów w truepołączeniu z css-shapesmoże nadać obszarowi tekstowemu dowolny kształt.

Obecnie Chrome Canary już obsługuje css-shapes . Przykładem możliwym w przypadku kształtów css jest:

Tutaj używają kształtu wielokąta do zdefiniowania przepływu tekstu. Powinno być możliwe utworzenie dwóch wielokątów pasujących do pożądanego kształtu dla obszaru tekstowego.

Więcej informacji na temat css-shapeszostało napisane na stronie: http://sarasoueidan.com/blog/css-shapes/

Aby włączyć kształty css w Chrome Canary:

1. Skopiuj i wklej chrome: // flags / # enable-experimental-web-platform-features-w pasku adresu, a następnie naciśnij enter.
2. Kliknij link „Włącz” w tej sekcji.

3. Kliknij przycisk „Uruchom ponownie teraz” u dołu okna przeglądarki.

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

Wielokąt utworzony przy pomocy: http://betravis.github.io/shape-tools/polygon-drawing/

Wynik

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

Może jest to możliwe dzięki edycji treści ?

To nie jest obszar tekstowy, ale jeśli uda ci się stworzyć div z tym kształtem, może działać.

Myślę, że nie jest to możliwe tylko w obszarze tekstowym ...

Mały przykład: http://jsfiddle.net/qgfP6/5/

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

Możesz pracować z zadowalającym div, z dwoma rogami 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>

Możesz to również zrobić z regionami CSS

Dzięki Regionom możesz używać właściwości CSS do przepuszczania treści do istniejących kontenerów w stylu, określając dowolną wybraną kolejność kontenerów, niezależnie od ich pozycji na stronie.

(Platforma internetowa)

[Obecnie obsługiwany w WebKit Nightly, Safari 6.1+ i iOS7 i już dostępny w Chrome i operze po włączeniu flagi: włącza eksperymentalne funkcje platformy internetowej - caniuse , platforma internetowa ]

SKRZYPCE

Możesz więc nadać temu kształtowi kształt, przepuszczając tekst przez 2 regiony i edytując go, dodając contentableable do treści.

Narzut

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

(Odpowiedni) 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;
}

Wynik:

Aby uzyskać więcej informacji o regionach - oto dobry artykuł: regiony CSS3: bogaty układ strony z HTML i CSS3

Długa linia tekstu w polu upuści kursor poza środkowe krawędzie i nie mogę tego naprawić.

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

To nie jest możliwe, panie! Obszar tekstowy to zazwyczaj prostokąt lub kwadrat, w którym można pisać.

Aby jednak zrobić coś takiego, możesz użyć 2 obszarów tekstowych, a następnie nadać im określoną szerokość i wysokość. W przeciwnym razie nie sądzę, że to się stanie!

Drugą metodą byłoby stworzenie edytowalnego elementu.

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

Kod to:

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

Za pomocą tego możesz edytować dowolny element! Możesz nadać mu wymiary, a zadziała! Otrzymasz to tylko jako obszar tekstowy.

Odniesienie: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Jeśli połączysz z tym kształty CSS,contenteditable możesz to zrobić w przeglądarkach internetowych.

Najpierw musisz włączyć flagę: enable-experimental-web-platform-features

Następnie uruchom ponownie przeglądarkę internetową, a następnie sprawdź ten FIDDLE !

Ta metoda działa również w przypadku niestandardowych kształtów.

Narzut

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

Skąd więc mam ten wielokąt?

Wejdź na tę stronę i stwórz własny kształt!

Uwagi na temat włączania flagi: ( stąd )

Aby włączyć kształty, regiony i tryby mieszania:

Skopiuj i wklej chrome: // flags / # enable-experimental-web-platform-features-w pasku adresu, a następnie naciśnij enter. Kliknij link „Włącz” w tej sekcji. Kliknij przycisk „Uruchom ponownie teraz” u dołu okna przeglądarki.

Za pomocą narzędzia Google Web Designer można tworzyć złożone kształty HTML5-canvas and CSS.

Więcej dostaniesz inne narzędzia, takie jak narzędzia do pisania, aby wprowadzić tekst w tych kształtach.

Ponieważ plik wyjściowy zawiera dużo kodu, stanowi skrzypce przykładowej wersji demonstracyjnej utworzonej za pomocą narzędzia Google Web Designer

FIDDLE DEMO >>

Jeśli z jakiegoś powodu naprawdę potrzebujesz obsługi przeglądarek, które go nie mają contenteditable , prawdopodobnie możesz zrobić to samo w JavaScript, używając zdarzeń, chociaż jest to bardzo niechlujne obejście.

Pseudo kod:

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