Biasanya textareas persegi panjang atau persegi, seperti ini:

Tapi saya ingin textarea berbentuk kustom, seperti ini, misalnya:

Bagaimana ini mungkin?

pengantar

Pertama, ada banyak solusi, yang diusulkan dalam posting lain. Saya pikir yang ini saat ini (tahun 2013) adalah yang dapat kompatibel dengan jumlah browser terbesar, karena tidak memerlukan properti CSS3. Namun, metode ini tidak akan berfungsi pada browser yang tidak mendukung contentdeditable , hati-hati.

Solusi dengan div contenteditable

Seperti yang diusulkan oleh @Getz , Anda dapat menggunakan div dengan contenteditabledan kemudian membentuknya dengan beberapa div di atasnya. Berikut adalah contohnya, dengan dua blok yang melayang di kiri atas dan kanan atas div utama:

Seperti yang Anda lihat, Anda harus bermain sedikit dengan perbatasan jika Anda ingin hasil yang sama seperti yang Anda minta di posting Anda. Div utama memiliki perbatasan biru di setiap sisi. Selanjutnya, blok merah harus ditempel untuk menyembunyikan batas atas div utama, dan Anda perlu menerapkan perbatasan hanya pada sisi tertentu ( bawah dan kiri untuk blok kanan, bawah dan kanan untuk kiri).

Setelah itu, Anda bisa mendapatkan konten melalui Javascript, ketika tombol " Kirim " dipicu misalnya. Dan saya pikir Anda juga dapat menangani sisa CSS ( font-size, color, dll) :)

Contoh kode lengkap

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

Dalam waktu dekat kita dapat menggunakan apa yang disebut css-shapesuntuk mencapai ini. Sebuah div dengan contenteditableatribut yang diset untuk truedigabungkan dengan css-shapesdapat membuat area teks bentuk apa pun.

Saat ini Chrome Canary sudah mendukung css-shapes . Contoh yang mungkin dengan css-bentuk adalah:

Di sini mereka menggunakan bentuk poligon untuk mendefinisikan aliran teks. Seharusnya dimungkinkan untuk membuat dua poligon agar sesuai dengan bentuk yang Anda inginkan untuk textarea Anda.

Informasi lebih lanjut tentang css-shapestelah ditulis di: http://sarasoueidan.com/blog/css-shapes/

Untuk mengaktifkan css-bentuk di Chrome Canary:

1. Salin dan tempel chrome: // flags / # enable-experimental-web-platform-features ke bilah alamat, lalu tekan enter.
2. Klik tautan 'Aktifkan' di dalam bagian itu.

3. Klik tombol 'Luncurkan Ulang Sekarang' di bagian bawah jendela browser.

   dari: 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 dibuat dengan: http://betravis.github.io/shape-tools/polygon-drawing/

Hasil

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

Mungkin itu mungkin dengan Content Editable ?

Ini bukan textarea, tetapi jika Anda berhasil membuat div dengan bentuk ini, itu bisa berhasil.

Saya pikir itu tidak mungkin hanya dengan textarea ...

Contoh kecil: http://jsfiddle.net/qgfP6/5/

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

Anda bisa bekerja dengan div yang dapat diedit, dengan dua sudut 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>

Anda juga bisa melakukan ini dengan Kawasan CSS

Dengan Kawasan, Anda dapat menggunakan properti CSS untuk mengalirkan konten ke wadah gaya yang ada, menentukan urutan wadah apa pun yang Anda pilih, terlepas dari posisinya di halaman.

(Platform Web)

[Saat ini didukung di WebKit Nightly, Safari 6.1+ dan iOS7 dan sudah dapat digunakan dalam chrome dan opera setelah mengaktifkan flag: enable-experimental-web-platform-features - caniuse , Web Platform ]

BIOLA

Jadi Anda bisa membuat bentuk teks itu dengan mengalirkan teks melalui 2 wilayah, dan mengeditnya dengan menambahkan konten yang dapat diedit pada konten.

Markup

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

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

Hasil:

Untuk info lebih lanjut tentang kawasan - inilah aricle yang bagus: wilayah CSS3: Tata letak halaman kaya dengan HTML dan CSS3

Baris panjang teks di dalam kotak akan menurunkan kursor melewati tepi tengah dan saya tidak bisa memperbaikinya

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

Itu tidak mungkin tuanku! Textarea umumnya kotak kotak atau persegi, tempat Anda bisa mengetik.

Namun, untuk membuat sesuatu seperti itu Anda dapat menggunakan 2 textarea dan kemudian memberi mereka lebar dan tinggi yang ditentukan. Kalau tidak, saya tidak berpikir itu akan terjadi!

Metode kedua adalah membuat elemen yang dapat diedit.

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

Kode tersebut adalah:

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

Dengan ini, Anda dapat membuat elemen apa pun dapat diedit! Anda dapat memberikan dimensi padanya, dan itu akan berhasil! Anda akan mendapatkannya hanya sebagai textarea.

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

Jika Anda menggabungkan bentuk CSS dengan contenteditableini dapat dilakukan di browser webkit.

Pertama, Anda harus mengaktifkan flag: enable-experimental-web-platform-features

Kemudian restart browser webkit Anda dan kemudian periksa FIDDLE ini !

Metode ini juga akan berfungsi untuk bentuk yang tidak standar.

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

Jadi bagaimana saya bisa mendapatkan bentuk poligon itu?

Buka situs ini dan buat bentuk kustom Anda sendiri!

Catatan tentang mengaktifkan bendera: (dari sini )

Untuk mengaktifkan Bentuk, Wilayah, dan Mode Campuran:

Salin dan tempel chrome: // flags / # enable-experimental-web-platform-features ke bilah alamat, lalu tekan enter. Klik tautan 'Aktifkan' di dalam bagian itu. Klik tombol 'Luncurkan Ulang Sekarang' di bagian bawah jendela browser.

Anda dapat menggunakan alat desainer web Google untuk membuat bentuk yang rumit menggunakan HTML5-canvas and CSS.

Terlebih lagi Anda akan mendapatkan alat lain seperti alat mengetik untuk memasukkan teks di dalam bentuk ini.

Karena file output berisi banyak kode, menyediakan contoh demo sampel yang dibuat menggunakan alat Google Web Designer

DEMO FIDDLE >>

Jika, untuk alasan apa pun, Anda benar-benar perlu mendukung browser yang tidak memilikinya contenteditable, Anda mungkin bisa melakukan hal yang sama dalam JavaScript, dengan menggunakan acara, meskipun ini merupakan solusi yang sangat berantakan.

Kodesemu:

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