Você pode ter um texto de espaço reservado HTML5 com várias linhas em uma <textarea>?


152

Eu tenho texto fantasma nos campos de texto que desaparecem quando você os focaliza usando o atributo de espaço reservado do HTML5:

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

Eu quero usar esse mesmo mecanismo para ter texto de espaço reservado multilinha em uma área de texto, talvez algo como isto:

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

Mas eles \nsão exibidos no texto e não causam novas linhas ... Existe uma maneira de ter um espaço reservado multilinha?

ATUALIZAÇÃO : A única maneira de fazer isso funcionar foi utilizando o plug-in jQuery Watermark , que aceita HTML no texto do espaço reservado:

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

O IE parece lidar com isso corretamente. Firefox OTOH apenas ignora as novas linhas
ekkis

1
stackoverflow.com/questions/7312623/… é uma pergunta muito semelhante, com boas respostas também.
Lloyd Dewolf

se você estiver encontrando isso e usando js para definir o valor, verifique o css white-spacepara garantir que esteja definido corretamente, por exemplo, pré-quebra
Cory Mawhorter

A partir dessa outra pergunta: &#10;funciona em qualquer lugar, exceto no Safari.
Sphinxxx

Respostas:


82

Para <textarea>s a especificação descreve especificamente que as quebras de retornos de carro + linha no atributo espaço reservado deve ser processado como quebras de linha pelo navegador.

Os agentes do usuário devem apresentar essa dica ao usuário quando o valor do elemento for a sequência vazia e o controle não estiver focado (por exemplo, exibindo-o dentro de um controle sem foco em branco). Todos os pares de caracteres U + 000D RETORNO DE CARRO U + 000A LINE FEED (CRLF) na dica, bem como todos os outros caracteres U + 000D CARRIAGE RETURN (CR) e U + 000A RETORNO DE CARRO (CR) e U + 000A LINE FEED (LF) na dica, devem ser tratados como quebras de linha ao renderizar a dica.

Também refletido no MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, quando tento o Chrome 63.0.3239.132, ele realmente funciona como deveria.


37
exceto que o atributo title não se comporta da mesma maneira, ou seja, não mostra conteúdo fantasma. na verdade, seria perfeitamente apropriado que os espaços reservados suportassem várias linhas para áreas de texto, pois as áreas de texto são criaturas com várias linhas. pena que a especificação não permita. Eu acho que os hacks terão que fazer. sigh
ekkis

71

Na maioria dos navegadores (veja detalhes abaixo), a edição do espaço reservado em javascript permite o espaço reservado para várias linhas. Como foi dito, não é compatível com o especificação e você não deve esperar que funcione no futuro (editar: funciona).

Este exemplo substitui todos os espaços reservados da área de texto multilinha.

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>

JsFiddleSnippet .

Resultado esperado

Resultado esperado


Com base nos comentários, parece que algum navegador aceita esse hack e outros não.
Estes são os resultados dos testes que eu executei (com browsertshots e browserstack )

  • Chrome:> = 35.0.1916.69
  • Firefox:> = 35.0 (os resultados variam de acordo com a plataforma)
  • IE:> = 10
  • Navegadores baseados em KHTML: 4.8
  • Safari: Não (testado = Safari 8.0.6 Mac OS X 10.8)
  • Opera: Não (testado <= 15.0.1147.72)

Fundido com essas estatísticas , isso significa que ele funciona em cerca de 88,7% dos navegadores atualmente usados (outubro de 2015) .

Atualização : Hoje, ele funciona em pelo menos 94,4% dos navegadores usados atualmente (julho de 2018) .


1
Esse exemplo do jsfiddle não funciona ... É multilinha apenas pelo tamanho da área de texto.
precisa saber é o seguinte

2
Há um erro de digitação, mas não consigo editar porque o StackOverflow me fornece o erro "As edições devem ter pelo menos 6 caracteres". Sua classe deve ser multilinenãomultiligne
Daniel Loureiro

@sebnukem: Ele funciona na maioria dos navegadores que eu testei. E não é uma questão de tamanho da área de texto. Você pode fornecer mais informações sobre o problema que teve?
Cyrbil

Não funciona no safari que parece ... - \ n desaparece, mas tudo é em uma única linha
Hackeron

1
@Jononk: Eu posso confirmar isso. Não se deve ao chrome, mas à Apple que força qualquer navegador a usar seus IOS WKWebView. Posteriormente, qualquer navegador no IOS não processará esse hack corretamente até WKWebViewo momento.
Cyrbil # 25/18

59

Acho que se você usar muitos espaços, o navegador o envolverá adequadamente. Não se preocupe em usar um número exato de espaços, basta colocar muito nele, e o navegador deve agrupar corretamente o primeiro caractere não espaço na próxima linha.

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

2
Yep várias linhas espaços reservados não são suportados crossbrowser, ter encontrado o mais recente safari faz apoio, mas definitivamente não é suportado em IOS5
Tom

7
isso não funciona para mim no IE nem no Firefox Windows. apenas insere os espaços que eu pedi
ekkis 10/10

O Chrome 37 está exibindo texto de espaço reservado em uma área de texto sem remover as novas linhas. Alguém sabe qual é o nome do 'recurso' para que eu possa: a) procurá-lo eb) testá-lo?
Ben

23

Existe um hack real que permite adicionar espaços reservados de várias linhas nos navegadores Webkit. O Chrome costumava funcionar, mas nas versões mais recentes eles o removeram:


Primeiro, adicione a primeira linha do seu espaço reservado ao html5, como de costume

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

adicione o restante da linha por css:

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

Se você quiser manter suas linhas em um só lugar, tente o seguinte. A desvantagem disso é que outros navegadores além do chrome, safari, webkit-etc. nem mostre a primeira linha:

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

adicione o restante da linha 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";
}

Violino de demonstração

Seria ótimo, se assim for, poderia obter uma demonstração semelhante trabalhando no Firefox.


obrigado por fornecer o link do violino. facilita a verificação do comportamento em vários navegadores. no IE 10, ambas as versões falham, assim como no FF 12 (Windows). pena disso. O Safari 6.1 funciona :(
ekkis

Não funciona mais no Chrome - há muito tempo, eu diria.
Mike Rockétt 22/02

6

Se você estiver usando o AngularJS, pode simplesmente usar chaves para colocar o que quiser: aqui está um violino.

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

1
Eu estou usando abordagem semelhante, mas ele não está funcionando no Safari e Firefox
stan

6

De acordo com a MDN ,

Retornos de carro ou feeds de linha no texto do espaço reservado devem ser tratados como quebras de linha ao renderizar a dica.

Isso significa que, se você pular para uma nova linha, ela deverá ser renderizada corretamente. Ou seja,

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea> 

deve renderizar assim:

insira a descrição da imagem aqui


3

A especificação html5 rejeita expressamente novas linhas no campo marcador de posição. Versões do Webkit / will / inserem novas linhas quando apresentadas com feeds de linha no espaço reservado, no entanto, esse é um comportamento incorreto e não deve ser considerado.

Eu acho que os parágrafos não são breves o suficiente para o w3;)


1
O comportamento do Webkit não está incorreto, pois a especificação não diz o que deve acontecer se existir CR / LF.
Christian

1
@Christian Agora, ele diz "Os agentes do usuário devem apresentar essa dica ao usuário, depois de terem retirado as quebras de linha ...". Ele diz o seguinte sobre a remoção de quebras de linha: "Quando um agente de usuário retira quebras de linha de uma sequência, ele deve remover quaisquer caracteres" LF "(U + 000A) e" CR "(U + 000D) dessa sequência. "
Richard Turner

Essa resposta não é mais verdadeira. A especificação agora exige expressamente que quebras de linha no espaço reservado sejam renderizadas como quebras de linha.
Clonkex

3

Reagir:

Se você estiver usando o React, poderá fazer o seguinte:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}

2

Se você textareatem uma largura estática, pode usar a combinação de espaço sem quebra e quebra automática de área de texto. Apenas substitua espaços para nbsp por cada linha e verifique se duas linhas vizinhas não podem caber em uma. Na prática line length > cols/2.

Essa não é a melhor maneira, mas pode ser a única solução 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>


1

Você pode tentar usar CSS, funciona para mim. O atributo placeholder=" "é obrigatório aqui.

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

1

em php com a função chr (13):

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';

0

Eu não acho que isso é possível apenas com html / css. Pode ser possível usar JavaScript ou algum outro tipo de hack - espaços extras para enviar o texto para a próxima linha, etc.


0

Espaço reservado para inicialização + conteúdo editável + multilinhas

Demonstração: https://jsfiddle.net/39mptojs/4/

com base nas respostas @cyrbil e @daniel

Usando o Bootstrap, jQuery e https://github.com/gr2m/bootstrap-expandable-input para ativar o espaço reservado no contenteditable.

Usando o javascript "placeholder replace" e adicionando "white-space: pre" ao css, o placeholder multilinha é mostrado.

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

-1

Solução de marca d'água no post original funciona muito bem. Obrigado por isso. Caso alguém precise, aqui está uma diretiva angular.

(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'));
              }
            }
          }
        }
      };
    });
}());
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.