Normalerweise sind Textbereiche wie folgt rechteckig oder quadratisch:

Aber ich möchte einen benutzerdefinierten Textbereich wie diesen, zum Beispiel:

Wie ist das möglich?

Einführung

Erstens gibt es viele Lösungen, die in anderen Beiträgen vorgeschlagen werden. Ich denke, dieser ist derzeit (2013) derjenige, der mit der größten Anzahl von Browsern kompatibel sein kann, da er keine CSS3-Eigenschaften benötigt. Die Methode funktioniert jedoch nicht in Browsern, die nicht unterstütztcontentdeditable werden. Seien Sie vorsichtig.

Lösung mit einem div contenteditable

Wie von @Getz vorgeschlagen , können Sie ein div mit verwenden contenteditableund es dann mit einem div darauf formen. Hier ist ein Beispiel mit zwei Blöcken, die oben links und oben rechts im Hauptteil schweben:

Wie Sie sehen, müssen Sie ein wenig mit den Rändern spielen, wenn Sie das gleiche Ergebnis erzielen möchten, das Sie in Ihrem Beitrag angefordert haben. Der Hauptteil hat auf jeder Seite den blauen Rand. Als nächstes müssen rote Blöcke aufgeklebt werden, um die oberen Ränder des Hauptteils auszublenden, und Sie müssen nur auf bestimmten Seiten einen Rand auf sie anwenden ( unten und links für den rechten Block, unten und rechts für den linken).

Danach können Sie den Inhalt über Javascript abrufen, wenn beispielsweise die Schaltfläche " Senden " ausgelöst wird. Und ich denke , man kann auch den Rest der CSS Griff ( font-size, colorusw.) :)

Vollständiges Codebeispiel

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

In naher Zukunft können wir so genannte verwenden css-shapes, um dies zu erreichen. Ein Div mit dem contenteditableAttribut " trueKombiniert mit" css-shapeskann einem Textbereich eine beliebige Form geben.

Derzeit Chrome Canary bereits unterstützt css-shapes . Ein Beispiel, was mit CSS-Formen möglich ist, ist:

Hier verwenden sie eine Polygonform, um den Textfluss zu definieren. Es sollte möglich sein, zwei Polygone zu erstellen, die der gewünschten Form für Ihren Textbereich entsprechen.

Weitere Informationen css-shapeszu finden Sie unter: http://sarasoueidan.com/blog/css-shapes/

So aktivieren Sie CSS-Formen in Chrome Canary:

1. Kopieren Sie chrome: // flags / # enable-experimentelle-Webplattform-Funktionen und fügen Sie sie in die Adressleiste ein. Drücken Sie dann die Eingabetaste.
2. Klicken Sie in diesem Abschnitt auf den Link "Aktivieren".

3. Klicken Sie unten im Browserfenster auf die Schaltfläche "Jetzt neu starten".

   von: 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 erstellt mit: http://betravis.github.io/shape-tools/polygon-drawing/

Ergebnis

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

Vielleicht ist es mit Content Editable möglich ?

Es ist kein Textbereich, aber wenn es Ihnen gelingt, ein Div mit dieser Form zu erstellen, könnte es funktionieren.

Ich denke, es ist nicht nur mit Textarea möglich ...

Ein kleines Beispiel: http://jsfiddle.net/qgfP6/5/

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

Sie könnten mit einem inhaltsbearbeitbaren Div mit zwei Eck-Divs arbeiten:

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

Sie können dies auch mit CSS-Regionen tun

Mit Regionen können Sie CSS-Eigenschaften verwenden, um Inhalte in vorhandene gestaltete Container zu fließen, wobei Sie eine beliebige Containerreihenfolge angeben, die Sie auswählen, unabhängig von ihrer Position auf der Seite.

(Webplattform)

[Wird derzeit in WebKit Nightly, Safari 6.1+ und iOS7 unterstützt und kann nach Aktivierung des Flags bereits in Chrome und Opera verwendet werden: enable-experimental-web-platform-features - caniuse , Web Platform ]

GEIGE

Sie können diese Textbereichsform also erstellen, indem Sie den Text durch zwei Regionen fließen lassen, und ihn bearbeiten, indem Sie dem Inhalt inhaltsbearbeitbare Elemente hinzufügen.

Markup

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

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

Das Ergebnis:

Weitere Informationen zu Regionen - hier ein guter Artikel: CSS3-Regionen: Reichhaltiges Seitenlayout mit HTML und CSS3

Eine lange Textzeile im Feld lässt den Cursor über die mittleren Ränder fallen, und ich kann das scheinbar nicht beheben.

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

Das ist nicht möglich, Herr! Ein Textbereich ist im Allgemeinen eine rechteckige oder quadratische Box, in die Sie eingeben können.

Um so etwas zu machen, können Sie jedoch 2 Textbereiche verwenden und ihnen dann eine bestimmte Breite und Höhe geben. Sonst denke ich nicht, dass es passieren wird!

Die zweite Methode wäre, ein bearbeitbares Element zu erstellen.

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

Der Code lautet:

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

Auf diese Weise können Sie jedes Element bearbeitbar machen! Sie können ihm Dimensionen geben, und es wird funktionieren! Sie erhalten es nur als Textbereich.

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

Wenn Sie kombinieren CSS Formen mit contenteditabledieser kann in Webkit - Browser erfolgen.

Zuerst müssen Sie das Flag aktivieren: enable-experimental-web-platform-features

Starten Sie dann Ihren Webkit-Browser neu und überprüfen Sie diese FIDDLE !

Diese Methode funktioniert auch für nicht standardmäßige Formen.

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

Wie um alles in der Welt habe ich diese Polygonform bekommen?

Gehen Sie auf diese Seite und erstellen Sie Ihre eigene Form!

Hinweise zum Aktivieren der Flagge: (von hier )

So aktivieren Sie Formen, Regionen und Mischmodi:

Kopieren Sie chrome: // flags / # enable-experimentelle-Webplattform-Funktionen und fügen Sie sie in die Adressleiste ein. Drücken Sie dann die Eingabetaste. Klicken Sie in diesem Abschnitt auf den Link "Aktivieren". Klicken Sie unten im Browserfenster auf die Schaltfläche "Jetzt neu starten".

Mit dem Google Web Designer-Tool können Sie komplexe Formen erstellen HTML5-canvas and CSS.

Darüber hinaus erhalten Sie andere Werkzeuge wie Schreibwerkzeuge, um Texte in diese Formen einzugeben.

Da die Ausgabedatei viel Code enthält, können Sie eine Beispieldemo erstellen, die mit dem Google Web Designer-Tool erstellt wurde

FIDDLE DEMO >>

Wenn Sie aus irgendeinem Grund wirklich Browser unterstützen müssen, die keine haben contenteditable, können Sie wahrscheinlich dasselbe in JavaScript tun, indem Sie Ereignisse verwenden, obwohl dies eine sehr unübersichtliche Problemumgehung ist.

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