Forma inusual de un textarea?
Normalmente las áreas de texto son rectangulares o cuadradas, así:
Pero quiero un área de texto con forma personalizada, como esta, por ejemplo:
¿Cómo es esto posible?
10 answers
Introducción
En primer lugar, hay muchas soluciones, propuestas en otros puestos. Creo que este es actualmente (en 2013) el que puede ser compatible con el mayor número de navegadores, ya que no necesita ninguna propiedad CSS3. Sin embargo, el método no funcionará en los navegadores que no admiten contentdeditable, ten cuidado.
Solución con un div contenteditable
Como propone @Getz, puede usar un div con contenteditable y luego darle forma con algún div. Aqui es un ejemplo, con dos bloques que flotan en la parte superior izquierda y la parte superior derecha del div principal:
Como puedes ver, tienes que jugar un poco con los bordes si quieres el mismo resultado que pediste en tu post. El div principal tiene el borde azul en cada lado. A continuación, los bloques rojos se deben pegar para ocultar los bordes superiores del div principal, y debe aplicarles el borde solo en lados particulares ( inferior e izquierdo para el bloque derecho, abajo y derecha para la izquierda).
Después de eso, puede obtener el contenido a través de Javascript, cuando se activa el botón "Submit", por ejemplo. Y creo que también puedes manejar el resto del CSS (font-size, color, etc.) :)
Muestra 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:53:40
En un futuro cercano podemos usar el llamado 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 tenga cualquier tipo de forma.
Actualmente Chrome Canary ya soporta 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 para que coincidan con la forma que desea para su área de texto.
Más la información sobre css-shapes se ha escrito en: http://sarasoueidan.com/blog/css-shapes /
Para habilitar css-shapes en Chrome Canary:
- Copiar y pegar chrome: / / flags / #enable-experimental-web-platform-features en el barra de direcciones y, a continuación, pulse intro.
- Haga clic en el enlace 'Habilitar' dentro de eso apartado.
Haga clic en el botón 'Relanzar ahora' en la parte inferior de la ventana del navegador.
.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>Polígono creado con: http://betravis.github.io/shape-tools/polygon-drawing/
Resultado
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-11 14:50:32
Tal vez sea posible con Contenido Editable?
No es un área de texto, pero si tiene éxito en 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-22 22:22:27
Podrías trabajar con un div contenteditable, con dos divs de esquinas:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-11 14:15:47
También puedes hacer esto con Regiones CSS
Con las regiones, puede usar propiedades CSS para hacer fluir el contenido a las existentes contenedores de estilo, especificando cualquier orden de contenedores que elija, independientemente de su posición en la página.
[Actualmente compatible con WebKit Nightly, Safari 6.1+ e iOS7 y ya se puede usar en chrome y opera después de habilitar el indicador: enable-experimental-web-platform-features - caniuse, Plataforma Web ]
FIDDLE
Así que podría hacer que la forma textarea fluya el texto a través de 2 regiones, y editarlo agregando contenteditable en el contenido.
Marcado
<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 más información sobre las regiones-aquí hay un buen arículo: Regiones CSS3: Diseño de página enriquecido con HTML y CSS3
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-23 22:20:37
Una línea larga de texto en el cuadro dejará caer el cursor más allá de los bordes centrales y no puedo arreglar eso.
**[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/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-04 08:05:45
Eso no es posible señor! Un área de texto es generalmente un cuadro recto o cuadrado, donde se puede escribir.
Sin embargo, para hacer algo así, puede usar 2 textarea y luego darles un ancho y un alto especificados. ¡De lo contrario no creo que vaya a pasar!
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, puede hacer que cualquier elemento sea editable! Puedes ¡dale dimensiones y funcionará! Lo obtendrás como un área de texto.
Referencia: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-22 10:04:18
Si combina formas CSS con contenteditable esto se puede hacer en los navegadores webkit.
Primero tiene que habilitar la bandera: enable-experimental-web-platform-features
Luego reinicia tu navegador webkit y luego comprueba este VIOLÍN ¡fuera !
Este método también funcionará para formas no estándar.
Marcado
<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 obtuve esa forma de polígono?
Ir a este sitio y hacer su propia forma personalizada!
Notas sobre cómo habilitar la bandera: (de aquí)
Para habilitar Formas, Regiones y Modos de Fusión:
Copiar y pegar chrome: / / flags / #enable-experimental-web-platform-features en el barra de direcciones y, a continuación, pulse intro. Haga clic en el enlace 'Habilitar' dentro de eso apartado. Haga clic en el botón 'Reiniciar ahora' en la parte inferior del navegador ventana.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-22 10:30:01
Puede utilizar Herramienta de diseño web de Google para crear formas complejas usando HTML5-canvas and CSS.
Además, obtendrá otras herramientas como herramientas de escritura para ingresar textos dentro de estas formas.
Como el archivo de salida contiene mucho código, proporcionando un violín de una demostración de muestra creada usando Google Web Designer tool
DEMOSTRACIÓN DE VIOLÍN>>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-28 12:08:05
Si, por cualquier razón, realmente necesita admitir navegadores que no tienen contenteditable, probablemente podría 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;
}
}