Genellikle textareas dikdörtgen veya kare şeklindedir, örneğin:

Ama bunun gibi özel şekilli bir metin alanı istiyorum, örneğin:

Bu nasıl mümkün olabilir?

Giriş

Birincisi, diğer yazılarda önerilen birçok çözüm var. Bunun şu anda (2013'te) en çok sayıda tarayıcıyla uyumlu olabileceğini düşünüyorum, çünkü herhangi bir CSS3 özelliğine ihtiyaç duymuyor. Ancak, yöntem desteklemeyen tarayıcılarda çalışmaz contentdeditable , dikkatli olun.

Div ile çözüm contenteditable

@Getz tarafından önerildiği gibi , ile bir div kullanabilir contenteditableve daha sonra üzerinde bir div ile şekillendirebilirsiniz. Ana div'in sol üst ve sağ üst kısmında yüzen iki blok içeren bir örnek:

Gördüğünüz gibi, gönderinizde talep ettiğiniz sonucun aynısını istiyorsanız sınırlarla biraz oynamalısınız . Ana div'in her tarafında mavi kenarlık var. Daha sonra, ana div'in üst sınırlarını gizlemek için kırmızı blokların yapıştırılması gerekir ve bunlara yalnızca belirli taraflara ( sağ blok için alt ve sol , sol için alt ve sağ ) kenarlık uygulamanız gerekir .

Bundan sonra, örneğin " Gönder " düğmesi tetiklendiğinde içeriği Javascript ile alabilirsiniz . Ve ayrıca CSS (kalanını işleyebilir düşünüyorum font-size, colorvs.) :)

Tam kod örneği

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

Yakın gelecekte bunu css-shapesbaşarmak için sözde kullanabilirsiniz . contenteditableÖznitelik ile truebirleştirilen bir div, css-shapesbir metin alanını her türlü şekil yapabilir.

Şu anda Chrome Canary zaten destekliyor css-shapes . Css-şekillerle mümkün olan bir örnek:

Burada metin akışını tanımlamak için çokgen bir şekil kullanıyorlar. Metin alanınız için istediğiniz şekle uyacak iki çokgen oluşturmak mümkün olmalıdır.

Hakkında daha fazla bilgi css-shapesşu adreste yazılmıştır: http://sarasoueidan.com/blog/css-shapes/

Chrome Canary'de css şekillerini etkinleştirmek için:

1. Chrome: // flags / # enable-experimental-web-platform-features öğesini kopyalayıp adres çubuğuna yapıştırın, ardından enter tuşuna basın.
2. Bu bölümdeki 'Etkinleştir' bağlantısını tıklayın.

3. Tarayıcı penceresinin altındaki 'Şimdi Yeniden Başlat' düğmesini tıklayın.

   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>

Http://betravis.github.io/shape-tools/polygon-drawing/ ile oluşturulan çokgen

Sonuç

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

Belki Düzenlenebilir İçerik ile mümkün olabilir ?

Bu bir metin alanı değil, ancak bu şekle sahip bir div oluşturmayı başarırsanız, işe yarayabilir.

Bence sadece textarea ile mümkün değil ...

Küçük bir örnek: http://jsfiddle.net/qgfP6/5/

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

İki köşeli div ile içerik düzenlenebilir bir div ile çalışabilirsiniz:

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

Bunu CSS Bölgeleri ile de yapabilirsiniz

Bölgeler ile, içeriği sayfadaki konumlarına bakılmaksızın, seçtiğiniz herhangi bir kapsayıcı sırasını belirterek mevcut stil sahibi kaplara içerik aktarmak için CSS özelliklerini kullanabilirsiniz.

(Web Platformu)

[Şu anda WebKit Nightly, Safari 6.1+ ve iOS7'de desteklenmektedir ve bayrağı etkinleştirdikten sonra zaten krom ve operada kullanılabilir: enable-experimental-web-platform-features - caniuse , Web Platformu ]

VAKTİNİ BOŞA HARCAMAK

Böylece, metni 2 bölgeye aktararak bu metin biçimini oluşturabilir ve içeriğe içerik eklenebilir şekilde düzenleyebilirsiniz.

Biçimlendirme

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

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

Sonuç:

Bölgeler hakkında daha fazla bilgi için - burada iyi bir aricle: CSS3 bölgeleri: HTML ve CSS3 ile zengin sayfa düzeni

Kutuda uzun bir metin satırı, imleci orta kenarların ötesine bırakacak ve bunu düzeltemiyorum.

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

Bu mümkün değil efendim! Bir metin alanı genellikle yazabileceğiniz bir rect veya kare kutudur.

Ancak, böyle bir şey yapmak için 2 textarea kullanın ve sonra onlara belirtilen genişlik ve yüksekliği verebilirsiniz. Aksi halde olacağını sanmıyorum!

İkinci yöntem, düzenlenebilir bir öğe yapmak olacaktır.

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

Kod:

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

Bunu kullanarak, herhangi bir öğeyi düzenlenebilir yapabilirsiniz! Ona boyutlar verebilirsiniz ve işe yarayacaktır! Bunu bir metin alanı olarak alacaksınız.

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

Eğer birleştirirseniz CSS şekiller ilecontenteditable webkit tarayıcılarında yapılabilir.

Öncelikle bayrağı etkinleştirmelisiniz: enable-experimental-web-platform-features

Ardından webkit tarayıcınızı yeniden başlatın ve bu FIDDLE'ı kontrol edin !

Bu yöntem standart olmayan şekiller için de işe yarayacaktır.

Biçimlendirme

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

Peki bu çokgen şeklini nasıl aldım?

Bu siteye git ve kendi özel şekil yapmak!

Bayrağı etkinleştirme hakkında notlar: ( buradan )

Şekiller, Bölgeler ve Karışım Modlarını etkinleştirmek için:

Chrome: // flags / # enable-experimental-web-platform-features öğesini kopyalayıp adres çubuğuna yapıştırın, ardından enter tuşuna basın. Bu bölümdeki 'Etkinleştir' bağlantısını tıklayın. Tarayıcı penceresinin altındaki 'Şimdi Yeniden Başlat' düğmesini tıklayın.

Sen kullanabilirsiniz Google web tasarımcısı aracını kullanarak karmaşık şekiller oluşturmak içinHTML5-canvas and CSS .

Dahası, bu şekillerin içine metin girmek için araçlar yazmak gibi başka araçlar da alacaksınız.

Çıktı dosyası çok fazla kod içerdiğinden, Google Web Designer aracı kullanılarak oluşturulan örnek bir demonun bir kemanını sağlar

FIDDLE DEMO >>

Herhangi bir nedenden ötürü, sahip olmayan tarayıcıları gerçekten desteklemeniz gerekiyorsa contenteditable , muhtemelen aynı şeyi JavaScript'te, etkinlikleri kullanarak yapabilirsiniz, ancak bu çok dağınık bir çözümdür.

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