Thông thường textareas là hình chữ nhật hoặc hình vuông, như thế này:

Nhưng tôi muốn một textarea có hình dạng tùy chỉnh, như thế này, ví dụ:

Sao có thể như thế được?

Giới thiệu

Đầu tiên, có nhiều giải pháp, được đề xuất trong các bài viết khác. Tôi nghĩ cái này hiện tại (năm 2013) là cái có thể tương thích với số lượng trình duyệt lớn nhất, bởi vì nó không cần bất kỳ thuộc tính CSS3 nào. Tuy nhiên, phương pháp sẽ không hoạt động trên các trình duyệt không hỗ trợ contentdeditable , hãy cẩn thận.

Giải pháp với div contenteditable

Theo đề xuất của @Getz , bạn có thể sử dụng div với contenteditablevà sau đó định hình nó với một số div trên đó. Dưới đây là một ví dụ, với hai khối nổi ở phía trên bên trái và phía trên bên phải của div chính:

Như bạn có thể thấy, bạn phải chơi một chút với các đường viền nếu bạn muốn kết quả giống như bạn yêu cầu trong bài viết của mình. Div chính có viền màu xanh ở mọi phía. Tiếp theo, các khối màu đỏ phải được dán để ẩn các đường viền trên cùng của div chính và bạn chỉ cần áp dụng đường viền cho chúng ở các mặt cụ thể ( phía dưới và bên trái cho khối bên phải, dưới cùng và bên phải cho bên trái).

Sau đó, bạn có thể lấy nội dung qua Javascript, khi nút " Gửi " được kích hoạt chẳng hạn. Và tôi nghĩ bạn cũng có thể xử lý phần còn lại của CSS ( font-size, color, vv) :)

Mẫu mã đầy đủ

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

Trong tương lai gần, chúng ta có thể sử dụng cái gọi là css-shapesđể đạt được điều này. Một div với contenteditablethuộc tính được đặt để truekết hợp với css-shapescó thể tạo một vùng văn bản bất kỳ loại hình dạng nào.

Hiện tại Chrome Canary đã hỗ trợ css-shapes . Một ví dụ những gì có thể với hình dạng css là:

Ở đây họ đang sử dụng hình dạng đa giác để xác định luồng văn bản. Có thể tạo hai đa giác để khớp với hình dạng bạn muốn cho vùng văn bản của bạn.

Thông tin thêm về css-shapesđã được viết tại: http://saraoueidan.com/blog/css-shapes/

Để bật hình dạng css trong Chrome Canary:

1. Sao chép và dán chrome: // flags / # enable-thử nghiệm-web-platform-tính năng vào thanh địa chỉ, sau đó nhấn enter.
2. Nhấp vào liên kết 'Kích hoạt' trong phần đó.

3. Nhấp vào nút 'Khởi chạy lại ngay ở cuối cửa sổ trình duyệt.

   từ: http://html.adobe.com/webpl platform / 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>

Đa giác được tạo bằng: http://betravis.github.io/shape-tools/polygon-drawing/

Kết quả

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

Có lẽ nó có thể với Nội dung có thể chỉnh sửa ?

Nó không phải là một textarea, nhưng nếu bạn thành công để tạo một div với hình dạng này, nó có thể hoạt động.

Tôi nghĩ rằng điều đó là không thể chỉ với textarea ...

Một ví dụ nhỏ: http://jsfiddle.net/qgfP6/5/

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

Bạn có thể làm việc với một div có thể nội dung, với hai góc 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>

Bạn cũng có thể làm điều này với Vùng CSS

Với Vùng, bạn có thể sử dụng các thuộc tính CSS để chuyển nội dung vào các vùng chứa theo kiểu hiện có, chỉ định bất kỳ thứ tự vùng chứa nào bạn chọn, bất kể vị trí của chúng trên trang.

(Nền tảng web)

[Hiện được hỗ trợ trong WebKit Nightly, Safari 6.1+ và iOS7 và đã có thể sử dụng bằng chrome và opera sau khi bật cờ: enable-thử nghiệm-nền tảng web-tính năng - caniuse , Nền tảng web ]

VĨ CẦM

Vì vậy, bạn có thể làm cho hình dạng văn bản đó bằng cách chuyển văn bản qua 2 vùng và chỉnh sửa nó bằng cách thêm nội dung vào nội dung.

Đánh dấu

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

(Có liên quan) 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;
}

Kết quả:

Để biết thêm thông tin về các khu vực - đây là một trung tâm tốt: các khu vực CSS3: Bố cục trang phong phú với HTML và CSS3

Một dòng văn bản dài trong hộp sẽ thả con trỏ xuống qua các cạnh giữa và tôi dường như không thể sửa nó.

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

Điều đó không thể xảy ra! Một textarea thường là một hộp trực tràng hoặc hình vuông, nơi bạn có thể nhập vào.

Tuy nhiên, để làm một cái gì đó tương tự, bạn có thể sử dụng 2 textarea và sau đó cung cấp cho chúng chiều rộng và chiều cao được chỉ định. Nếu không tôi không nghĩ nó sẽ xảy ra!

Phương pháp thứ hai sẽ là tạo ra một yếu tố có thể chỉnh sửa.

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

Mã này là:

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

Sử dụng điều này, bạn có thể làm cho bất kỳ yếu tố có thể chỉnh sửa! Bạn có thể cung cấp kích thước cho nó, và nó sẽ hoạt động! Bạn sẽ nhận được nó giống như một textarea.

Tham khảo: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

Nếu bạn kết hợp các hình dạng CSS với contenteditableđiều này có thể được thực hiện trong trình duyệt webkit.

Trước tiên, bạn phải bật cờ: enable-thử nghiệm-nền tảng web-tính năng

Sau đó khởi động lại trình duyệt webkit của bạn và sau đó kiểm tra FIDDLE này !

Phương pháp này cũng sẽ làm việc cho các hình dạng không chuẩn.

Đánh dấu

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

Vậy làm thế nào trên trái đất tôi có được hình dạng đa giác đó?

Tới trang web này và tạo hình tùy chỉnh của riêng bạn!

Lưu ý về việc bật cờ: (từ đây )

Để bật Chế độ hình dạng, khu vực và pha trộn:

Sao chép và dán chrome: // flags / # enable-thử nghiệm-web-platform-tính năng vào thanh địa chỉ, sau đó nhấn enter. Nhấp vào liên kết 'Kích hoạt' trong phần đó. Nhấp vào nút 'Khởi chạy lại ngay ở cuối cửa sổ trình duyệt.

Bạn có thể sử dụng công cụ thiết kế web của Google để tạo các hình dạng phức tạp bằng cách sử dụng HTML5-canvas and CSS.

Hơn nữa bạn sẽ nhận được các công cụ khác như công cụ gõ để nhập văn bản bên trong các hình dạng này.

Vì tệp đầu ra chứa nhiều mã, cung cấp một bản thử nghiệm mẫu được tạo bằng công cụ Google Web Designer

FIDDLE DEMO >>

Nếu vì bất kỳ lý do gì, bạn thực sự cần hỗ trợ các trình duyệt không có contenteditable, có lẽ bạn có thể làm điều tương tự trong JavaScript, bằng cách sử dụng các sự kiện, mặc dù đây là một cách giải quyết rất lộn xộn.

Mã giả:

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