poner - ¿Puede tener texto de marcador de posición HTML5 multilínea en un<textarea>?

hacer mas grande una caja de texto en html

Question

Tengo texto fantasma en los campos de texto que desaparecen cuando te enfocas en ellos usando el atributo de marcador de posición de HTML5:

<input type="text" name="email" placeholder="Enter email"/>

Quiero usar el mismo mecanismo para tener texto de marcador de posición multilínea en un área de texto, tal vez algo como esto:

<textarea name="story" placeholder="Enter story/n next line/n more"></textarea>

Pero esos /n ns aparecen en el texto y no causan líneas nuevas ... ¿Hay alguna forma de tener un marcador de posición de varias líneas?

ACTUALIZACIÓN : La única forma en que logré que esto funcionara fue utilizando el complemento jQuery Watermark , que acepta HTML en el texto del marcador de posición:

$(''.textarea_class'').watermark(''Enter story<br/> * newline'', {fallback: false});

Answer 1

Creo que si usa muchos espacios, el navegador lo ajustará correctamente. No se preocupe por usar un número exacto de espacios, solo arroje un montón allí, y el navegador debe ajustarse adecuadamente al primer carácter que no sea espacio en la siguiente línea.

<textarea name="address" placeholder="1313 Mockingbird Ln Saginaw, MI 45100"></textarea>

Answer 2

En la mayoría de los navegadores (ver detalle a continuación), editar el marcador de posición en javascript permite el marcador de posición de varias líneas. Como se ha dicho, no cumple con la specification y no debe esperar que funcione en el futuro.

Este ejemplo reemplaza el marcador de posición de todos los cuadros de texto multilínea.

var textAreas = document.getElementsByTagName(''textarea'');
Array.prototype.forEach.call(textAreas, function(elem) {
elem.placeholder = elem.placeholder.replace(///n/g, ''/n'');
});

<textarea class="textAreaMultiline"
placeholder="Hello, /nThis is multiline example /n/nHave Fun"
rows="5" cols="35"></textarea>

Resultado Esperado

Según los comentarios, parece que algunos navegadores aceptan este truco y otros no.
Este es el resultado de las pruebas que ejecuté (con browsertshots y browserstack )

• Chrome:> = 35.0.1916.69
• Firefox:> = 35.0 (los resultados varían según la plataforma)
• IE:> = 10
• Navegadores basados ​​en KHTML: 4.8
• Safari: No (probado = Safari 8.0.6 Mac OS X 10.8)
• Opera: No (probado <= 15.0.1147.72)

En base a las statistics , esto significa que funciona en aproximadamente el 88,7% de los navegadores actualmente utilizados (octubre de 2015) .

Answer 3

Existe un truco real que permite agregar marcadores de posición multilínea en navegadores Webkit, Chrome solía funcionar, pero en versiones más recientes lo eliminaban:

Primero agregue la primera línea de su marcador de posición al html5 como de costumbre

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

luego agrega el resto de la línea por css:

#text1::-webkit-input-placeholder::after {
display:block;
content:"Line 2/A Line 3";
}

Si desea mantener sus líneas en un lugar, puede intentar lo siguiente. La desventaja de esto es que otros navegadores distintos de Chrome, Safari, WebKit-etc. ni siquiera muestra la primera línea:

<textarea id="text2" placeholder="." rows="10"></textarea>​

luego agrega el resto de la línea por css:

#text2::-webkit-input-placeholder{
color:transparent;
}
#text2::-webkit-input-placeholder::before {
color:#666;
content:"Line 1/A Line 2/A Line 3/A";
}

Demo Fiddle

Sería genial, si es así, podría obtener una demo similar trabajando en Firefox.

Answer 4

La especificación html5 rechaza expresamente las líneas nuevas en el campo del marcador de posición. Las versiones de Webkit / will / insert nuevas líneas cuando se presentan con líneas de alimentación en el marcador de posición, sin embargo, este es un comportamiento incorrecto y no se debe confiar en él.

Creo que los párrafos no son lo suficientemente breves para w3;)

Answer 5

La specification no permite la alimentación de línea o los caracteres de retorno de carro.

El atributo marcador de posición representa una breve sugerencia (una palabra o frase corta) destinada a ayudar al usuario con la entrada de datos. Una sugerencia podría ser un valor de muestra o una breve descripción del formato esperado. El atributo, si se especifica, debe tener un valor que no contenga caracteres U + 000A LINE FEED (LF) o U + 000D CARRIAGE RETURN (CR).

Aparentemente, la recomendación es usar un atributo de title por más tiempo.

Para una sugerencia más larga u otro texto de consulta, el atributo de título es más apropiado.

EDITAR (1/8/18):

Para <textarea> ''s esto no parece ser el caso. La especificación realmente describe que los retornos de carro + saltos de línea DEBEN ser representados como tales por el navegador.

Los agentes de usuario deben presentar esta sugerencia al usuario cuando el valor del elemento es la cadena vacía y el control no está enfocado (por ejemplo, mostrándolo dentro de un control desenfocado en blanco). Todos los U + 000D RETORNO DE CARREROS U + 000A pares de caracteres ALIMENTACIÓN DE LÍNEA (CRLF) en la sugerencia, así como todos los demás caracteres U + 000D CARRIAGE RETURN (CR) y U + 000A LINE FEED (LF) en la sugerencia, deben tratarse como saltos de línea al renderizar la sugerencia.

Ver documentos: http://w3c.github.io/html/sec-forms.html#element-attrdef-textarea-placeholder
También se refleja en MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

FWIW, cuando pruebo Chrome 63.0.3239.132, de hecho funciona como dice que debería.

Answer 6

La solución de marca de agua en la publicación original funciona muy bien. Gracias por eso. En caso de que alguien lo necesite, aquí hay una directiva angular para él.

(function () {
''use strict'';
angular.module(''app'')
.directive(''placeholder'', function () {
return {
restrict: ''A'',
link: function (scope, element, attributes) {
if (element.prop(''nodeName'') === ''TEXTAREA'') {
var placeholderText = attributes.placeholder.trim();
if (placeholderText.length) {
// support for both ''/n'' symbol and an actual newline in the placeholder element
var placeholderLines = Array.prototype.concat
.apply([], placeholderText.split(''/n'').map(line => line.split(''//n'')))
.map(line => line.trim());
if (placeholderLines.length > 1) {
element.watermark(placeholderLines.join(''<br>/n''));
}
}
}
}
};
});
}());

Answer 7

No creo que eso sea posible solo con html / css. Podría ser posible usar JavaScript o algún otro tipo de hack - espacios adicionales para enviar el texto a la siguiente línea, etc.

Answer 8

Puedes intentar usar CSS, funciona para mí. El atributo placeholder=" " es requerido aquí.

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
content: "1st line.../A2nd line.../A3rd line...";
}
</style>

Answer 9

Si está usando AngularJS, puede simplemente usar llaves para colocar lo que quiera en él: Aquí hay un violín.

<textarea rows="6" cols="45" placeholder="{{''Address Line1/nAddress Line2/nCity State, Zip/nCountry''}}"></textarea>

Answer 10

Si su área de textarea tiene un ancho estático, puede usar una combinación de espacio no disruptivo y envoltura automática de área de texto. Simplemente reemplace espacios por nbsp para cada línea y asegúrese de que dos líneas contiguas no puedan encajar en una. En la práctica line length > cols/2 .

Esta no es la mejor manera, pero podría ser la única solución entre navegadores.

<textarea class="textAreaMultiligne"
placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
rows="5" cols="35"></textarea>

Answer 11

Bootstrap + contenteditable + marcador de posición multilínea

Demostración: https://jsfiddle.net/39mptojs/4/

basado en la respuesta de @cyrbil y @daniel

Usando Bootstrap, jQuery y https://github.com/gr2m/bootstrap-expandable-input para habilitar el marcador de posición en contentible.

Usando javascript "placeholder replace" y agregando "white-space: pre" a css, se muestra el marcador de posición multilínea.

Html:

<div class="form-group">
<label for="exampleContenteditable">Example contenteditable</label>
<div id="exampleContenteditable" contenteditable="true" placeholder="test/nmultiple line/nhere/n/nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 .../nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
</div>
</div>

Javascript:

$(document).ready(function() {
$(''div[contenteditable="true"]'').each(function() {
var s=$(this).attr(''placeholder'');
if (s) {
var s1=s.replace(///n/g, String.fromCharCode(10));
$(this).attr(''placeholder'',s1);
}
});
});

Css:

.form-control[contenteditable="true"] {
border:1px solid rgb(238, 238, 238);
padding:3px 3px 3px 3px;
white-space: pre !important;
height:auto !important;
min-height:38px;
}
.form-control[contenteditable="true"]:focus {
border-color:#66afe9;
}