Pouvez-vous avoir un texte d’emplacement fictif HTML5 multiligne dans une <textarea>?
J'ai du texte fantôme dans les champs de texte qui disparaissent lorsque vous vous concentrez sur eux à l'aide de l'attribut de marque de réservation de HTML5:
<input type="text" name="email" placeholder="Enter email"/>
Je veux utiliser ce même mécanisme pour avoir du texte fictif multiligne dans une zone de texte, par exemple:
<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>
Mais ces \ns apparaissent dans le texte et ne causent pas de nouvelles lignes ... Y a-t-il un moyen d'avoir un espace réservé multiligne?
UPDATE: La seule façon pour que cela fonctionne est d'utiliser le plugin jQuery Watermark , qui accepte HTML dans le texte de substitution:
$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});
La spécification n'autorise pas les caractères de saut de ligne ni de retour chariot.
L'attribut d'espace réservé représente un indice court (un mot ou une phrase courte ) Destiné à aider l'utilisateur à saisir des données. Un indice pourrait être un valeur d'échantillon ou une brève description du format attendu. Le L'attribut, s'il est spécifié, doit avoir une valeur ne contenant pas U + 000A LINE FEED (LF) ou U + 000D CARRIAGE RETURN (CR).
Apparemment, la recommandation est d'utiliser un attribut title pour quoi que ce soit plus longtemps.
Pour un indice plus long ou un autre texte de conseil, l'attribut title est more approprié.
EDIT (1/8/18):
Pour <textarea>, cela ne semble pas être le cas. La spécification indique en fait que les retours chariot + les sauts de ligne DOIVENT être restitués tels quels par le navigateur.
Les agents d’utilisateur doivent présenter cette indication à l’utilisateur lorsque la valeur de l’élément est la chaîne vide et que le contrôle n’est pas ciblé (par exemple, en l’affichant dans un contrôle non ciblé vide). Toutes les paires de caractères U + 000D LINE FEED (CRLF) U + 000D du renvoi, ainsi que toutes les autres caractères U + 000D RETOUR CARRIAGE (CR) et U + 000A LINE FEED (LF) doivent être traitées lorsque la ligne se brise lors du rendu de l'indice.
Voir docs: http://w3c.github.io/html/sec-forms.html#element-attrdef-textarea-placeholder
Voir aussi MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea } _
FWIW, lorsque j'essaie de Chrome 63.0.3239.132, cela fonctionne comme prévu.
Je trouve que si vous utilisez beaucoup d’espaces, le navigateur l’enveloppera correctement. Ne vous inquiétez pas de l'utilisation d'un nombre exact d'espaces, mettez-y simplement beaucoup, et le navigateur devrait se positionner correctement sur le premier caractère sans espace de la ligne suivante.
<textarea name="address" placeholder="1313 Mockingbird Ln Saginaw, MI 45100"></textarea>
Il existe un hack qui permet d'ajouter des espaces réservés multilignes dans les navigateurs Webkit. Chrome fonctionnait auparavant, mais dans les versions les plus récentes, ils l'ont supprimé:
Commencez par ajouter la première ligne de votre espace réservé au HTML5 comme d'habitude
<textarea id="text1" placeholder="Line 1" rows="10"></textarea>
puis ajoutez le reste de la ligne par css:
#text1::-webkit-input-placeholder::after {
display:block;
content:"Line 2\A Line 3";
}
Si vous voulez garder vos lignes à un endroit, vous pouvez essayer ce qui suit. L'inconvénient est que d'autres navigateurs que Chrome, Safari, Webkit, etc. ne même pas montrer la première ligne:
<textarea id="text2" placeholder="." rows="10"></textarea>
puis ajoutez le reste de la ligne par css:
#text2::-webkit-input-placeholder{
color:transparent;
}
#text2::-webkit-input-placeholder::before {
color:#666;
content:"Line 1\A Line 2\A Line 3\A";
}
Ce serait très bien, si à Une démo similaire pourrait fonctionner avec Firefox.
La spécification html5 rejette expressément les nouvelles lignes dans le champ des espaces réservés. Les versions de Webkit / will/ insèrent de nouvelles lignes lorsqu'elles sont présentées avec des sauts de ligne dans l'espace réservé, ce comportement est toutefois incorrect et ne doit pas être invoqué.
Je suppose que les paragraphes ne sont pas assez brefs pour w3;)
Si vous utilisez AngularJS, vous pouvez simplement utiliser des accolades pour y placer ce que vous souhaitez: Voici un violon
<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>
Si votre textarea a une largeur statique, vous pouvez utiliser une combinaison d'espace insécable et d'habillage de zone de texte automatique. Remplacez simplement les espaces par nbsp pour chaque ligne et assurez-vous que deux lignes voisines ne peuvent pas tenir dans une. En pratique line length > cols/2.
Ce n'est pas la meilleure façon, mais pourrait être la seule solution multi-navigateur.
<textarea class="textAreaMultiligne"
placeholder="Hello, This is multiligne example Have Fun "
rows="5" cols="35"></textarea>Vous pouvez essayer d'utiliser CSS, cela fonctionne pour moi. L'attribut placeholder=" " est requis ici.
<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
content: "1st line...\A2nd line...\A3rd line...";
}
</style>
Les retours à la ligne ou les sauts de ligne dans le texte réservé doivent être traités comme des sauts de ligne lors du rendu de l'indicateur.
Cela signifie que si vous passez simplement à une nouvelle ligne, celle-ci doit être restituée correctement. C'est à dire.
<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>
devrait rendre comme ceci:
Bootstrap + contenteditable + espace réservé multiline
Démo: https://jsfiddle.net/39mptojs/4/
basé sur les réponses @cyrbil et @daniel
Utilisation de Bootstrap, jQuery et https://github.com/gr2m/bootstrap-expandable-input pour activer l’espace réservé dans contenteditable.
En utilisant "placeholder replace" javascript et en ajoutant "white-space: pre" à css, un espace réservé multiligne est affiché.
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;
}
en php avec la fonction 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>';
Réagir:
Si vous utilisez React, vous pouvez le faire comme suit:
placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}
Je ne pense pas que ce soit possible uniquement avec HTML/CSS. Peut-être possible d'utiliser JavaScript ou un autre type de bidouille - espaces supplémentaires pour pousser le texte à la ligne suivante, etc.