javascript - para - textarea placeholder

¿Forma inusual de un textarea?

Question

Usualmente las textareas son rectangulares o cuadradas, así:

Pero quiero un área de texto con forma personalizada, como esta, por ejemplo:

¿Cómo es esto posible?

Answer 1

Introducción

Primero, hay muchas soluciones, propuestas en otros posts. Creo que este es actualmente (en 2013) el que puede ser compatible con la mayor cantidad de navegadores, ya que no necesita ninguna propiedad CSS3. Sin embargo, el método no funcionará en los navegadores que no son compatibles con el contentdeditable , tenga cuidado.

Solución con un div contenteditable

Según lo propuesto por @Getz , puede usar un div con contenteditable y luego darle forma con algún div en él. Aquí hay un ejemplo, con dos bloques que flotan en la parte superior izquierda y en la parte superior derecha de la división principal:

Como puede ver, debe jugar un poco con los bordes si desea obtener el mismo resultado que solicitó en su publicación. El div principal tiene el borde azul en cada lado. A continuación, los bloques rojos se deben pegar para ocultar los bordes superiores de la división principal, y debe aplicarles un borde solo en los lados particulares ( inferior e izquierdo para el bloque derecho, inferior y derecho para el izquierdo).

Después de eso, puede obtener el contenido a través de Javascript, cuando se activa el botón " Enviar ", por ejemplo. Y creo que también puedes manejar el resto de CSS ( font-size , color , etc.) :)

Ejemplo de código completo

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

Answer 2

En un futuro cercano podemos usar las llamadas css-shapes para lograr esto. Un div con el atributo contenteditable establecido en true combinado con css-shapes puede hacer que un área de texto sea cualquier tipo de forma.

Actualmente Chrome Canary ya supports css-shapes . Un ejemplo de lo que es posible con css-shapes es:

Aquí están usando una forma de polígono para definir el flujo de texto. Debería ser posible crear dos polígonos que coincidan con la forma que desea para su área de texto.

Más información sobre css-shapes se ha escrito en: http://sarasoueidan.com/blog/css-shapes/

Para habilitar las formas css en Chrome Canary:

1. Copie y pegue chrome: // flags / # enable-experimental-web-platform-features en la barra de direcciones, luego presione intro.
2. Haga clic en el enlace ''Habilitar'' dentro de esa sección.

3. Haga clic en el botón ''Relanzar ahora'' en la parte inferior de la ventana del navegador.

   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>

Polygon creado con: http://betravis.github.io/shape-tools/polygon-drawing/

Resultado

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

Answer 3

Eso no es posible señor! Un área de texto es generalmente una caja cuadrada o rect, donde puede escribir.

Sin embargo, para hacer algo así puedes usar 2 textarea''s y luego darles un ancho y una altura específicos. De lo contrario no creo que vaya a suceder!

El segundo método sería hacer un elemento editable.

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

El código es:

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

¡Usando esto, puedes hacer cualquier elemento editable! Puedes darle dimensiones, y funcionará! Lo obtendrás solo como un textarea.

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

Answer 4

Podrías trabajar con un div contenteditable, con dos esquinas divs:

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

Answer 5

Puede utilizar la herramienta de diseño web de Google para crear formas complejas utilizando HTML5-canvas and CSS .

Además, obtendrá otras herramientas como las herramientas de escritura para ingresar textos dentro de estas formas.

Dado que el archivo de salida contiene mucho código, se proporciona un elemento de una muestra de muestra creada con la herramienta Google Web Designer.

DEMO DE FIDDLE >>

Answer 6

Si combina formas CSS con contenteditable esto se puede hacer en los navegadores webkit.

Primero tienes que habilitar el indicador: habilitar-experimental-plataforma-características-web

¡Luego reinicie su navegador webkit y luego revise este FIDDLE !

Este método funcionará también para formas no estándar.

Margen

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

Entonces, ¿cómo diablos conseguí esa forma de polígono?

¡Ve a http://betravis.github.io/shape-tools/polygon-drawing/ y crea tu propia forma personalizada!

Notas sobre la habilitación de la bandera: (desde http://html.adobe.com/webplatform/enable/ )

Para habilitar las formas, regiones y modos de fusión:

Copie y pegue chrome: // flags / # enable-experimental-web-platform-features en la barra de direcciones, luego presione intro. Haga clic en el enlace ''Habilitar'' dentro de esa sección. Haga clic en el botón ''Relanzar ahora'' en la parte inferior de la ventana del navegador.

Answer 7

Si, por el motivo que sea, realmente necesita ser compatible con los navegadores que no se pueden contenteditable , es probable que pueda hacer lo mismo en JavaScript, mediante el uso de eventos, aunque esta es una solución muy complicada.

Pseudocódigo

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

Answer 8

Tal vez sea posible con el contenido editable ?

No es un área de texto, pero si logra crear un div con esta forma, podría funcionar.

Creo que no es posible con solo textarea ...

Un pequeño ejemplo: http://jsfiddle.net/qgfP6/5/

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

Answer 9

También puedes hacer esto con CSS Regions

Con Regions, puede usar las propiedades de CSS para hacer fluir el contenido a los contenedores de estilo existentes, especificando cualquier orden de contenedor que elija, independientemente de su posición en la página.

(Plataforma web)

[Actualmente se admite en WebKit Nightly, Safari 6.1+ y iOS7 y ya se puede utilizar en chrome y opera después de habilitar la marca: habilitar-experimental-plataforma-web-características- caniuse , plataforma web ]

FIDDLE

Por lo tanto, puede hacer que esa forma de área de texto fluya el texto a través de 2 regiones y lo edite agregando contenteditable en el contenido.

Margen

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

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

El resultado:

Para obtener más información sobre las regiones, aquí hay un buen artículo: regiones CSS3: diseño de página enriquecido con HTML y CSS3

Answer 10

Una larga línea de texto en el cuadro colocará el cursor sobre los bordes del medio y parece que no puedo arreglarlo.

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