web-dev-qa-db-fra.com

Forme inhabituelle d'une zone de texte?

Les textareas sont généralement rectangulaires ou carrés, comme ceci:

Usual textarea

Mais je veux une zone de texte personnalisée, comme celle-ci, par exemple:

Custom-shaped textarea

Comment est-ce possible?

javascriptjqueryhtmlcss
272
Paranoid

Introduction

Premièrement, il existe de nombreuses solutions, proposées dans d'autres messages. Je pense que celui-ci est actuellement (en 2013) celui qui peut être compatible avec le plus grand nombre de navigateurs, car il n'a pas besoin de propriétés CSS3. Cependant, la méthode ne fonctionnera pas sur les navigateurs ne supportant pascontentdeditable, soyez prudent.

Solution avec un div contenteditable

Comme proposé par @ Getz , vous pouvez utiliser un div avec contenteditable puis le modeler avec un div. Voici un exemple, avec deux blocs qui flottent en haut à gauche et en haut à droite de la div principale:

The result with Firefox 28

Comme vous pouvez le constater, vous devez jouer un peu avec les bordures si vous souhaitez obtenir le même résultat que celui que vous aviez demandé dans votre message. La div principale a la bordure bleue de chaque côté. Ensuite, des blocs rouges doivent être collés pour masquer les bordures supérieures de la div principale, et vous devez leur appliquer une bordure uniquement sur des côtés particuliers ( en bas et à gauche pour le bloc droit, basse et à droite pour la gauche).

Après cela, vous pouvez obtenir le contenu via Javascript, par exemple lorsque le bouton " Soumettre" est activé. Et je pense que vous pouvez aussi gérer le reste du CSS (font-size, color, etc.) :)

Exemple de code complet

.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>
262
Maxime Lorant

Dans un proche avenir, nous pouvons utiliser ce que l'on appelle css-shapes pour y parvenir. Un div avec l'attribut contenteditable défini sur true combiné avec css-shapes peut créer une zone de texte n’importe quel type de forme.

Actuellement Chrome Canary déjà prend en chargecss-shapes. Un exemple de ce qui est possible avec css-Shapes est:

enter image description here

Ici, ils utilisent une forme de polygone pour définir le flux de texte. Il devrait être possible de créer deux polygones pour correspondre à la forme souhaitée pour votre zone de texte.

Plus d'informations sur css-shapes a été écrit à: http://sarasoueidan.com/blog/css-shapes/

Pour activer les formes css dans Chrome Canary:

  1. Copiez et collez les attributs chrome: // flags/# enable-experimental-expérimental-web-platform-plate-forme dans la barre d'adresse, puis appuyez sur la touche Entrée.
  2. Cliquez sur le lien "Activer" dans cette section.

  3. Cliquez sur le bouton "Relancer maintenant" en bas de la fenêtre du navigateur.

    à partir de: 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>

Polygone créé avec: http://betravis.github.io/shape-tools/polygon-drawing/

Résultat

enter image description here

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

115
Bas van Dijk

Peut-être que c'est possible avec Content Editable ?

Ce n'est pas une zone de texte, mais si vous parvenez à créer une div avec cette forme, cela pourrait fonctionner.

Je pense que ce n'est pas possible avec juste textarea ...

Un petit exemple: http://jsfiddle.net/qgfP6/5/

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

Vous pouvez travailler avec un div contenteditable, avec deux div coins:

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

Vous pouvez également le faire avec CSS Regions

Avec Regions, vous pouvez utiliser les propriétés CSS pour transférer du contenu dans des conteneurs stylés existants, en spécifiant l'ordre de conteneur que vous choisissez, quelle que soit leur position sur la page.

(Plateforme Web)

enter image description here

[Actuellement supporté par WebKit Nightly, Safari 6.1+ et iOS7 et déjà utilisable dans chrome et opera après avoir activé le drapeau: enable-experimental-web-platform- caractéristiques - caniuse , plate-forme Web ]

VIOLON

Ainsi, vous pouvez créer cette forme textarea en faisant circuler le texte sur 2 régions et la modifier en ajoutant contenteditable sur le contenu.

Markup

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

CSS (pertinent)

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

Le résultat:

enter image description here

Pour plus d'informations sur les régions, voici un bon article: Régions CSS3: Mise en page enrichie avec HTML et CSS

20
Danield

Une longue ligne de texte dans la zone amènera le curseur au-delà des bords du milieu et je n'arrive pas à résoudre ce problème.

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

Ce n'est pas possible Sire! Un textarea est généralement un rect ou carré, où vous pouvez taper.

Cependant, pour créer quelque chose comme ça, vous pouvez utiliser 2 textarea's, puis leur donner une largeur et une hauteur spécifiées. Sinon, je ne pense pas que ça va arriver!

La deuxième méthode consisterait à créer un élément modifiable.

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

Le code est:

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

En utilisant cela, vous pouvez rendre n'importe quel élément éditable! Vous pouvez lui donner des dimensions, et cela fonctionnera! Vous l'obtiendrez comme une textarea.

Référence: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

8
Afzaal Ahmad Zeeshan

Si vous combinez formes CSS avec contenteditable, vous pouvez le faire dans les navigateurs Webkit.

Vous devez d’abord activer le drapeau: enable-experimental-web-platform-features

Ensuite, redémarrez votre navigateur Webkit, puis vérifiez ceci FIDDLE out!

Cette méthode fonctionnera également pour les formes non standard.

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

Alors, comment ai-je pu obtenir cette forme de polygone?

Allez sur ce site et créez votre propre forme personnalisée!

Notes sur l'activation du drapeau: (from here )

Pour activer les modes Formes, Régions et Fusion:

Copiez et collez les attributs chrome: // flags/# enable-experimental-expérimental-web-platform-plate-forme dans la barre d'adresse, puis appuyez sur la touche Entrée. Cliquez sur le lien "Activer" dans cette section. Cliquez sur le bouton "Relancer maintenant" en bas de la fenêtre du navigateur.

5
Danield

Vous pouvez utiliser outil de conception de sites Web Google pour créer des formes complexes à l'aide de HTML5-canvas and CSS.

De plus, vous aurez d'autres outils comme des outils de dactylographie pour saisir des textes à l'intérieur de ces formes.

Étant donné que le fichier de sortie contient beaucoup de code, fournir un violon d’un exemple de démonstration créé à l’aide de de l’outil Google Web Designer

FIDDLE DEMO >>

5
Prasanth K C

Si, pour une raison quelconque, vous devez réellement prendre en charge les navigateurs n'ayant pas contenteditable, vous pouvez probablement faire la même chose en JavaScript, en utilisant des événements, bien que la solution de contournement soit très compliquée.

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