Insérer un saut de ligne à l'intérieur de l'espace réservé attribut d'un textarea?

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

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

Fonctionne sur:
Chrome 62, IE10

Ne fonctionne pas sur:
Firefox 57, Safari 11

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

Mise à JOUR (Janvier 2016): Le joli petit hack peut ne pas fonctionner sur tous les navigateurs plus donc j'ai une nouvelle solution avec un peu de javascript ci-dessous.

---

Un Bon Petit Hack

Il ne se sent pas belle, mais vous pouvez juste mettre les nouvelles lignes dans le code html. Comme ceci:

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

Avis de chaque ligne est sur une nouvelle ligne (non enveloppé) et chaque onglet' indentation de 4 espaces. Accordée il n'est pas très agréable, mais il 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 de sorte que la taille de la zone de texte est fixe (Voir jsfiddle).

Sinon
Quand vous voulez une nouvelle ligne, appuyez sur entrée deux fois (Donc il y a une ligne vide entre votre "nouvelle ligne". Cette "ligne vide" créé doit avoir assez de tabulations et les espaces qui équivaut à la largeur de votre textarea. Il ne semble pas d'importance si vous avez beaucoup trop, vous avez juste besoin d'assez de. C'est tellement sale, bien que probablement pas navigateur compatible. Je souhaite qu'il y avait un moyen plus facile!

---

Une Meilleure Solution

Découvrez la JSFiddle.

• Cette solution positions un div derrière le textarea.
• Javascript est utilisé pour changer la couleur de fond de la textarea, cacher ou 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 la police, de là, les deux mixin.
• La box-sizing et display: block propriétés dans le textarea sont importantes ou de la div derrière ce ne sera pas la même taille.
• Réglage resize: vertical et un min-height sur le textarea sont également importants - notez la façon dont le texte de l'espace réservé s'occupera de l'emballage et de l'expansion de la textarea gardera le fond blanc. Toutefois, en commentant la resize propriété entraîner des problèmes lors de l'expansion de la zone de texte à l'horizontale.
• Assurez-vous que le min-height sur le textarea est suffisant pour couvrir la totalité 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');
}
});

Salaamun Alekum




Travaille Pour Google Chrome

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

J'Ai Testé Cela Sur Windows 10.0 (Build 10240) Et La Version De Google Chrome
47.0.2526.80 m

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

Merci

Utilisation 
 en place de /n cela va changer la ligne.

Essayez ceci:

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

http://jsfiddle.net/vr79B/

J'ai aimé le travail de Jason Gennaro et Denis Golomazov, mais je voulais quelque chose qui serait plus globalement utiles. J'ai modifié le concept de sorte qu'il peut ê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');
});

Découvrez cette solution avec la coutume de l'espace réservé.

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

Démo sur le violon.

JS:

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

CSS:

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

HTML:

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

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

Le paramètre pre-line a résolu le problème pour moi.

CSS:

textarea {
white-space: pre-line;
}

HTML:

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