โดยปกติ textareas จะเป็นสี่เหลี่ยมหรือสี่เหลี่ยมเช่นนี้

แต่ฉันต้องการ textarea รูปแบบกำหนดเองเช่นนี้ตัวอย่างเช่น:

เป็นไปได้อย่างไร?

บทนำ

ก่อนอื่นมีวิธีแก้ปัญหามากมายที่เสนอในบทความอื่น ฉันคิดว่าอันนี้ปัจจุบัน (ในปี 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>

ในอนาคตอันใกล้เราสามารถใช้สิ่งที่เรียกว่าcss-shapesเพื่อบรรลุเป้าหมายนี้ div ที่มีcontenteditableชุดคุณลักษณะที่trueรวมเข้าด้วยกันcss-shapesสามารถทำให้พื้นที่ข้อความมีรูปร่างได้

ปัจจุบัน Chrome Canary แล้วสนับสนุน css-shapesตัวอย่างสิ่งที่เป็นไปได้ด้วย css-shapes คือ:

ที่นี่พวกเขากำลังใช้รูปหลายเหลี่ยมเพื่อกำหนดการไหลของข้อความ มันเป็นไปได้ที่จะสร้างรูปหลายเหลี่ยมสองรูปเพื่อให้ตรงกับรูปร่างที่คุณต้องการสำหรับ textarea ของคุณ

ข้อมูลเพิ่มเติมเกี่ยวกับcss-shapesเขียนได้ที่: http://sarasoueidan.com/blog/css-shapes/

วิธีเปิดใช้ css-shapes ใน Chrome Canary:

1. คัดลอกและวาง chrome: // ค่าสถานะ / # enable-Experimental-web-platform-features ลงในแถบที่อยู่แล้วกด Enter
2. คลิกลิงก์ 'เปิดใช้งาน' ภายในส่วนนั้น

3. คลิกปุ่ม 'เปิดใหม่ทันที' ที่ด้านล่างของหน้าต่างเบราว์เซอร์

   จาก: 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/

ผลลัพธ์

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

อาจเป็นไปได้ด้วยเนื้อหาที่แก้ไขได้ ?

มันไม่ใช่ textarea แต่ถ้าคุณประสบความสำเร็จในการสร้าง div ด้วยรูปร่างนี้มันก็ใช้ได้

ฉันคิดว่ามันเป็นไปไม่ได้ที่มีเพียง textarea ...

ตัวอย่างเล็ก ๆ น้อย ๆ : http://jsfiddle.net/qgfP6/5/

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

คุณสามารถทำงานกับ div ที่พึงพอใจได้ด้วย 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>

คุณสามารถทำได้ด้วยCSS Regions

ด้วยภูมิภาคคุณสามารถใช้คุณสมบัติ CSS เพื่อไหลเนื้อหาลงในคอนเทนเนอร์ที่มีสไตล์ที่มีอยู่โดยระบุลำดับคอนเทนเนอร์ใด ๆ ที่คุณเลือกโดยไม่คำนึงถึงตำแหน่งของพวกเขาในหน้า

(แพลตฟอร์มเว็บ)

[ขณะนี้ได้รับการสนับสนุนใน WebKit Nightly, Safari 6.1+ และ iOS7 และสามารถใช้งานได้แล้วใน Chrome และ Opera หลังจากเปิดใช้งานการตั้งค่าสถานะ: เปิดใช้งานการทดลอง - คุณสมบัติแพลตฟอร์มเว็บ - caniuse , แพลตฟอร์มเว็บ ]

ซอ

ดังนั้นคุณสามารถสร้างรูปแบบของ textarea โดยการกระจายข้อความผ่าน 2 ภูมิภาคและแก้ไขโดยการเพิ่ม contenteditable บนเนื้อหา

มาร์กอัป

<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

ข้อความยาวในกล่องจะวางเคอร์เซอร์ลงผ่านขอบกลางและฉันไม่สามารถแก้ไขได้

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

นั่นเป็นไปไม่ได้ฝ่าบาท! โดยทั่วไป textarea จะเป็นกล่องสี่เหลี่ยมหรือสี่เหลี่ยมซึ่งคุณสามารถพิมพ์ได้

อย่างไรก็ตามในการทำบางสิ่งเช่นนั้นคุณสามารถใช้ textarea 2 รายการจากนั้นให้ความกว้างและความสูงที่ระบุ มิฉะนั้นฉันไม่คิดว่ามันจะเกิดขึ้น!

วิธีที่สองจะทำให้องค์ประกอบที่แก้ไขได้

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

รหัสคือ:

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

เมื่อใช้สิ่งนี้คุณสามารถทำให้องค์ประกอบใด ๆ สามารถแก้ไขได้! คุณสามารถให้มิติกับมันและมันจะใช้ได้! คุณจะได้รับเช่นเดียวกับ textarea

การอ้างอิง: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

หากคุณรวมรูปร่าง CSSกับcontenteditableสิ่งนี้สามารถทำได้ในเว็บเบราว์เซอร์

ก่อนอื่นคุณต้องเปิดใช้งานการตั้งค่าสถานะ: enable-experiment-web-platform-features

จากนั้นรีสตาร์ทเบราว์เซอร์ webkit ของคุณแล้วตรวจสอบ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;
}

แล้วรูปทรงหลายเหลี่ยมบนโลกเป็นยังไงบ้าง?

ไปที่ไซต์นี้และสร้างรูปร่างที่คุณกำหนดเอง!

หมายเหตุเกี่ยวกับการเปิดใช้งานการตั้งค่าสถานะ: (จากที่นี่ )

ในการเปิดใช้งานโหมดรูปร่างภูมิภาคและเบลนด์:

คัดลอกและวาง chrome: // ค่าสถานะ / # enable-Experimental-web-platform-features ลงในแถบที่อยู่แล้วกด Enter คลิกลิงก์ 'เปิดใช้งาน' ภายในส่วนนั้น คลิกปุ่ม 'เปิดใหม่ทันที' ที่ด้านล่างของหน้าต่างเบราว์เซอร์

คุณสามารถใช้เครื่องมือออกแบบเว็บของ GoogleHTML5-canvas and CSSสำหรับการสร้างรูปทรงที่ซับซ้อนโดยใช้

มากกว่าคุณจะได้รับเครื่องมืออื่น ๆ เช่นเครื่องมือการพิมพ์เพื่อป้อนข้อความภายในรูปร่างเหล่านี้

เนื่องจากไฟล์ที่ส่งออกมีรหัสมากให้ซอของตัวอย่างตัวอย่างที่สร้างขึ้นโดยใช้เครื่องมือ Google Web Designer

ตัวอย่าง FIDDLE >>

หากไม่ว่าด้วยเหตุผลใดก็ตามคุณต้องสนับสนุนเบราว์เซอร์ที่ไม่มีอยู่จริงcontenteditableคุณอาจทำสิ่งเดียวกันใน JavaScript โดยใช้กิจกรรมแม้ว่านี่จะเป็นวิธีแก้ปัญหาที่ยุ่งมาก

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