J'ai essayé quelques approches mais aucune n'a fonctionné. Est-ce que quelqu'un connaît une astuce astucieuse pour contourner cela?

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line     
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

MISE À JOUR: cela ne fonctionne pas dans Chrome. C'était juste la largeur de la zone de texte.

Voir: http://jsfiddle.net/pdXRx/

Ce que vous pouvez faire est d'ajouter le texte en tant que value, ce qui respecte le saut de ligne \n.

$('textarea').attr('value', 'This is a line \nthis should be a new line');

Ensuite, vous pouvez le retirer focuset le réappliquer (s'il est vide) blur. Quelque chose comme ça

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

Exemple: http://jsfiddle.net/airandfingers/pdXRx/247/

Pas du CSS pur et pas propre mais fait l'affaire.

Vous pouvez insérer une nouvelle entité html de ligne 
à l'intérieur de l'attribut d'espace réservé:

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

Fonctionne sur: Chrome 62, IE10, Firefox 60

Ne fonctionne pas sur: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

Ne pensez pas que vous êtes autorisé à faire cela: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

Le contenu pertinent (c'est moi qui souligne):

L'attribut d'espace réservé représente un bref indice (un mot ou une phrase courte) destiné à aider l'utilisateur à saisir des données lorsque le contrôle n'a aucune valeur. Un indice peut être un exemple de valeur ou une brève description du format attendu. L'attribut, s'il est spécifié, doit avoir une valeur qui ne contient aucun caractère U + 000A LINE FEED (LF) ou U + 000D CARRIAGE RETURN (CR).

MISE À JOUR (janvier 2016): Le joli petit hack pourrait ne plus fonctionner sur tous les navigateurs, j'ai donc une nouvelle solution avec un tout petit peu de javascript ci-dessous.

Un joli petit hack

Cela ne fait pas du bien, mais vous pouvez simplement mettre les nouvelles lignes dans le html. Comme ça:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

Notez que chaque ligne est sur une nouvelle ligne (non encapsulée) et chaque retrait de «tabulation» est de 4 espaces. Certes, ce n'est pas une très bonne méthode, mais cela semble fonctionner:

http://jsfiddle.net/01taylop/HDfju/

• Il est probable que le niveau de retrait de chaque ligne varie en fonction de la largeur de votre zone de texte.
• Il est important d'avoir resize: none;dans le css pour que la taille de la zone de texte soit fixe (voir jsfiddle).

Alternativement, lorsque vous voulez une nouvelle ligne, appuyez deux fois sur retour (il y a donc une ligne vide entre vos 'nouvelles lignes'. Cette 'ligne vide' créée doit avoir suffisamment de tabulations / espaces correspondant à la largeur de votre zone de texte. Il semble que peu importe si vous en avez beaucoup trop, vous en avez juste besoin. C'est tellement sale et probablement pas compatible avec le navigateur. J'aurais aimé qu'il y ait un moyen plus simple!

Une meilleure solution

Découvrez le JSFiddle .

• Cette solution place un div derrière la zone de texte.
• Certains javascript sont utilisés pour modifier la couleur d'arrière-plan de la zone de texte, masquant ou révélant l'espace réservé de manière appropriée.
• Les entrées et les espaces réservés doivent avoir les mêmes tailles de police, d'où les deux mixins.
• Les propriétés box-sizinget display: blockde la zone de texte sont importantes ou le div derrière celui-ci ne sera pas de la même taille.
• Le réglage resize: verticalet un min-heightsur la zone de texte sont également importants - notez comment le texte de l'espace réservé sera enveloppé et l'agrandissement de la zone de texte conservera l'arrière-plan blanc. Cependant, commenter la resizepropriété entraînera des problèmes lors de l'expansion horizontale de la zone de texte.
• Assurez-vous simplement que la hauteur minimale de la zone de texte est suffisante pour couvrir l'intégralité de votre espace réservé à sa plus petite largeur. **

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

Que diriez-vous d'une solution CSS: http://cssdeck.com/labs/07fwgrso

::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

Salaamun Alekum




Fonctionne pour Google Chrome

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

J'ai testé ceci sur Windows 10.0 (Build 10240) et Google Chrome Version 47.0.2526.80 m

08:43:08 AST 6 Rabi Al-Awwal, 1437 jeudi 17 décembre 2015

Merci

Ajoutez seulement & # 10 pour casser la ligne, pas besoin d'écrire du CSS ou du javascript.

textarea{
    width:300px;
    height:100px;

}

<textarea placeholder='This is a line this &#10should be a new line'></textarea>

<textarea placeholder=' This is a line 

should this be a new line?'></textarea>

Ancienne réponse:

Non, vous ne pouvez pas faire cela dans l'attribut d'espace réservé. Vous ne pouvez même pas encoder html comme 
dans un espace réservé.

Nouvelle réponse:

Les navigateurs modernes vous offrent plusieurs façons de procéder. Voir ce JSFiddle:

http://jsfiddle.net/pdXRx/5/

Utiliser 
à la place de \ncela changera la ligne.

Essaye ça:

<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>

http://jsfiddle.net/vr79B/

Vous ne pouvez pas le faire avec du HTML pur, mais ce plugin jQuery vous permettra: https://github.com/bradjasper/jQuery-Placeholder-Newlines

Une version légèrement améliorée de la réponse de Jason Gennaro (voir les commentaires du code):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

J'ai aimé le travail de Jason Gennaro et Denis Golomazov, mais je voulais quelque chose qui serait plus globalement utile. J'ai modifié le concept pour qu'il puisse être ajouté à n'importe quelle page sans répercussion.

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

Le javascript est très simple

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

HTML

<textarea data-placeholder="1111\n2222"></textarea>

JS

$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});

Textarea respecte l'attribut d'espace blanc pour l'espace réservé. https://www.w3schools.com/cssref/pr_text_white-space.asp

Le régler en pré-ligne a résolu le problème pour moi.

textarea {
  white-space: pre-line;
}

<textarea placeholder='This is a line     
should this be a new line'></textarea>

J'ai modifié le violon de @Richard Bronosky comme ça .

Il est préférable d'utiliser un data-*attribut plutôt qu'un attribut personnalisé. J'ai remplacé <textarea placeholdernl>to <textarea data-placeholder>et quelques autres styles également.

édité
Voici la réponse originale de Richard qui contient un extrait de code complet.

très simple

  var position = your break position;
    var breakLine = "
";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;

valeur représente la chaîne d'origine

Découvrez cette solution avec un espace réservé personnalisé.

• Vous obtenez un espace réservé multiligne qui fonctionne dans tous les navigateurs (y compris Firefox)
• Il est possible de personnaliser l'espace réservé comme vous le souhaitez

Démo sur violon .

$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }   
});

#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="textAreaWrap">
    
<textarea id="textArea"></textarea>

<!-- Check here. If textarea has content -
     set for this div attribute style="display: none;" -->
<div id="placeholderDiv">Multiline textarea<br>
                         placeholder<br>
                         <br>
                         that works in Firefox</div>
    
</div>

Je n'aime pas cacher l'espace réservé lorsque vous concentrez la zone de texte. J'ai donc créé une fonction de constructeur Placeholderqui ressemble exactement à l'espace réservé intégré et qui fonctionne également dans d'autres navigateurs que Google Chrome. C'est très pratique car vous pouvez utiliser la Placeholderfonction aussi souvent que vous le souhaitez et elle n'a même pas besoin de jQuery.

ÉDITER:

Il gère désormais également correctement les cas particuliers, comme l'insertion de l'espace réservé.

var textarea = document.getElementById("textarea");
new Placeholder(textarea, "Line 1\nLine 2\nLine 3");

function Placeholder(el, placeholder) {
    if (el.value == "" || el.value == placeholder) {
        el.style.color = "gray";
        el.value = placeholder;
        el._plc = true;
        el.className += " unselectable";
    }
    function keyPress(e) {
        window.setTimeout(function() {
            var replaced = reverseStr(el.value).replace(reverseStr(placeholder), "");
            
            if (el.value == "") {
                el.value = placeholder;
                el.style.color = "gray";
                cursorToStart(el);
                el._plc = true;
                el.className += " unselectable";
            } else if (el._plc && el.value.endsWith(placeholder) && replaced !== "") {
                el.value = reverseStr(replaced);
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            } else if (el._plc && el.readOnly) {
                var ch = String.fromCharCode(e.charCode);
                if (e.keyCode == 13) ch = "\n";     // ENTER
                else if (e.charCode == 0) return;   // non-character keys
                
                el.value = ch;
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            }
        }, 10);
    }
    el.addEventListener("keypress", keyPress, false);
    el.addEventListener("paste", keyPress, false);
    el.addEventListener("cut", keyPress, false);
    el.addEventListener("mousedown", function() {
        if (el._plc) el.readOnly = true;
    }, false);
    el.addEventListener("mouseup", function() {
        el.readOnly = false;
        if (el._plc) cursorToStart(el);
    }, false);
  
    function cursorToStart(input) {
        if (input.createTextRange) {
            var part = input.createTextRange();
            part.move("character", 0);
            part.select();
        } else if (input.setSelectionRange){
            input.setSelectionRange(0, 0);
        } input.focus();
    }
    function reverseStr(str) {
        if (!str) return "";
        return str.split("").reverse().join("");
    }
}

textarea {
    border: 1px solid gray;
    padding: 3px 6px;
    font-family: Arial;
    font-size: 13px;
    transition: .2s;
}
textarea:hover, textarea:focus {
    border-color: #2277cc;
}
textarea:focus {
    box-shadow: inset 0 0 5px #85B7E9;
}
*.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

<textarea id="textarea"></textarea>

Ce problème peut être résolu en utilisant le sélecteur affiché par espace réservé et les arrière-plans super-imposés, si votre implémentation le permet:

textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}

https://codepen.io/franciscoaquino/pen/YzyBPYK

Prise en charge du sélecteur:

https://caniuse.com/#feat=css-placeholder-shown