ACTUALIZACIÓN (enero de 2016): El pequeño truco podría no funcionar en todos los navegadores, así que tengo una nueva solución con un poco de JavaScript a continuación.
Un pequeño truco agradable
No se siente bien, pero puedes poner las nuevas líneas en el html. Me gusta esto:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Observe que cada línea está en una nueva línea (no se está ajustando) y cada sangría de 'tabulación' tiene 4 espacios. De acuerdo, no es un método muy bueno, pero parece funcionar:
http://jsfiddle.net/01taylop/HDfju/
- Es probable que el nivel de sangría de cada línea varíe según el ancho del área de texto.
- Es importante tener
resize: none;en el CSS para que el tamaño del área de texto sea fijo (Ver jsfiddle).
Alternativamente,
cuando desee una nueva línea, presione Intro dos veces (Por lo tanto, hay una línea vacía entre sus 'nuevas líneas'. Esta 'línea vacía' creada debe tener suficientes pestañas / espacios que equivalen al ancho de su área de texto. Parece que no importa si tienes demasiados, solo necesitas lo suficiente. Sin embargo, esto es muy sucio y probablemente no sea compatible con el navegador. ¡Ojalá hubiera una manera más fácil!
Una mejor solución
Mira el JSFiddle .
- Esta solución coloca un div detrás del área de texto.
- Algunos javascript se utilizan para cambiar el color de fondo del área de texto, ocultando o revelando el marcador de posición de manera adecuada.
- Las entradas y los marcadores de posición deben tener los mismos tamaños de fuente, de ahí que los dos mixins.
- Las propiedades
box-sizingy display: blocken el área de texto son importantes o el div detrás de él no será del mismo tamaño.
- La configuración
resize: verticaly una min-heighten el área de texto también son importantes: observe cómo el texto del marcador de posición se ajustará y expandir el área de texto mantendrá el fondo blanco. Sin embargo, comentar la resizepropiedad causará problemas al expandir el área de texto horizontalmente.
- Solo asegúrese de que la altura mínima en el área de texto sea suficiente para cubrir todo el marcador de posición en su ancho más pequeño. **
HTML:
<form>
<input type='text' placeholder='First Name' />
<input type='text' placeholder='Last Name' />
<div class='textarea-placeholder'>
<textarea></textarea>
<div>
First Line
<br /> Second Line
<br /> Third Line
</div>
</div>
</form>
SCSS:
$input-padding: 4px;
@mixin input-font() {
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 16px;
}
@mixin placeholder-style() {
color: #999;
@include input-font();
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
width: 250px;
}
input,textarea {
display: block;
width: 100%;
padding: $input-padding;
border: 1px solid #ccc;
}
input {
margin-bottom: 10px;
background-color: #fff;
@include input-font();
}
textarea {
min-height: 80px;
resize: vertical;
background-color: transparent;
&.data-edits {
background-color: #fff;
}
}
.textarea-placeholder {
position: relative;
> div {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: $input-padding;
background-color: #fff;
@include placeholder-style();
}
}
::-webkit-input-placeholder {
@include placeholder-style();
}
:-moz-placeholder {
@include placeholder-style();
}
::-moz-placeholder {
@include placeholder-style();
}
:-ms-input-placeholder {
@include placeholder-style();
}
Javascript:
$("textarea").on('change keyup paste', function() {
var length = $(this).val().length;
if (length > 0) {
$(this).addClass('data-edits');
} else {
$(this).removeClass('data-edits');
}
});
<?="\n"?>como una nueva línea