Insérer un retour à la ligne dans l'attribut placeholder d'un textarea ?

Question

J'ai essayé plusieurs approches mais aucune n'a fonctionné. Quelqu'un connaît-il un truc astucieux pour contourner ce problème ?

<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 : Il ne fonctionne pas dans chrome. C'était juste la largeur de la zone de texte.

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

Answer 1

Vous pouvez insérer une nouvelle ligne de l'entité html 
 dans l'attribut de l'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/

Answer 2

MISE À JOUR (janvier 2016) : Cette petite astuce ne fonctionne peut-être plus sur tous les navigateurs. J'ai donc une nouvelle solution avec un petit bout de javascript ci-dessous.

---

Un petit truc sympa

Ce n'est pas agréable, mais vous pouvez simplement mettre les nouvelles lignes dans le html. Comme ceci :

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

Remarquez que chaque ligne est sur une nouvelle ligne (non enveloppée) et que chaque retrait de " tabulation " est de 4 espaces. Je reconnais que ce n'est pas une méthode très agréable, mais elle 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).

Ou bien Lorsque vous voulez une nouvelle ligne, appuyez deux fois sur la touche retour (pour qu'il y ait une ligne vide entre vos "nouvelles lignes"). Cette "ligne vide" doit comporter suffisamment de tabulations/espaces pour correspondre à la largeur de votre zone de texte. Le fait d'en avoir beaucoup trop n'a pas d'importance, il faut juste en avoir assez. Mais c'est tellement sale et probablement pas compatible avec les navigateurs. J'aimerais qu'il y ait un moyen plus simple !

---

Une meilleure solution

Consultez le JSFiddle .

• Cette solution permet de positionner un div derrière la zone de texte.
• Un certain javascript est utilisé pour modifier la couleur d'arrière-plan de la zone de texte, ce qui permet de masquer ou de révéler l'espace réservé de manière appropriée.
• Les entrées et les espaces réservés doivent avoir la même taille de police, d'où les deux mixins.
• El box-sizing y display: block Les propriétés du textarea sont importantes, sinon le div qui se trouve derrière n'aura pas la même taille.
• Réglage de resize: vertical et un min-height sur la zone de texte sont également importants - remarquez comment le texte de l'espace réservé s'enroule et comment l'expansion de la zone de texte conserve le fond blanc. Cependant, la mise en commentaire de l'élément resize causera 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'ensemble de votre espace réservé dans 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');
  }
});

Answer 3

Je ne pense pas que vous ayez le droit de faire ça : http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

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

L'attribut placeholder représente un court un indice (un mot ou une courte phrase) destiné à aider l'utilisateur à saisir des données lorsque le contrôle n'a pas de valeur. aucune valeur. Il peut s'agir d'un exemple de valeur ou d'une brève description du format attendu. format attendu. L'attribut, s'il est spécifié, doit avoir une valeur qui ne doit pas contenir de caractères U+000A LINE FEED (LF) ou U+000D CARRIAGE RETURN (CR). de caractères.

Answer 4

Ce que vous pourriez faire, c'est ajouter le texte comme value qui respecte le saut de ligne \n .

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

Ensuite, vous pourriez l'enlever sur focus et le réappliquer (s'il est vide) sur blur . Quelque chose comme ceci

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 de CSS pur et pas de nettoyer mais fait l'affaire.

Answer 5

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