J’ai essayé quelques approches mais aucune n’a fonctionné. Est-ce que quelqu’un sait le truc astucieux pour contourner cela?
MISE À JOUR: Cela ne fonctionne pas en chrome. C’était juste la largeur de la zone de texte.
Voir: http://jsfiddle.net/pdXRx/
Ce que vous pouvez faire est d’append le texte en tant que value
, qui respecte le saut de ligne.
$('textarea').attr('value', 'This is a line \nthis should be a new line');
Ensuite, vous pouvez le supprimer et l’appliquer (s’il est vide) sur le 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 purement CSS et pas propre mais fait le tour.
Vous pouvez insérer une nouvelle ligne html entity
à l’intérieur de l’atsortingbut d’espace réservé:
Fonctionne sur: Chrome 62, IE10
Ne fonctionne pas sur: Firefox 57, Safari 11
Ne pensez pas que vous êtes autorisé à le faire: http://www.w3.org/TR/html5/forms.html#the-placeholder-atsortingbute
Le contenu pertinent (c’est moi qui souligne):
L’atsortingbut d’espace réservé représente un court 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’atsortingbut, 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, alors j’ai une nouvelle solution avec un peu de javascript ci-dessous.
Cela ne semble pas bien, mais vous pouvez simplement mettre les nouvelles lignes dans le HTML. Comme ça:
Notez que chaque ligne est sur une nouvelle ligne (non encapsulée) et que chaque retrait est de 4 espaces. Certes, ce n’est pas une très bonne méthode, mais cela semble fonctionner:
http://jsfiddle.net/01taylop/HDfju/
resize: none;
dans le css pour que la taille de la textarea soit fixe (voir jsfiddle). Si vous voulez une nouvelle ligne, appuyez deux fois sur la touche Entrée (il y a donc une ligne vide entre vos nouvelles lignes). Cette ligne vide doit avoir suffisamment d’tabs / d’espaces correspondant à la largeur de votre zone de texte. Cela ne semble pas avoir d’importance si vous en avez trop, vous en avez juste besoin. C’est tellement sale et probablement pas compatible avec le navigateur. J’aimerais qu’il y ait un moyen plus simple!
Découvrez le JSFiddle .
box-sizing
et leur display: block
propriétés de display: block
sur la zone de texte sont importantes ou la div derrière elles ne sera pas de la même taille. resize: vertical
et une min-height
sur la zone de texte sont également importants – notez comment le texte de remplacement remplira et élargira la zone de texte pour conserver le fond blanc. Cependant, commenter la propriété de resize
entraînera des problèmes lors de l’extension horizontale de la zone de texte.
HTML:
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
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
Je vous remercie
Non, vous ne pouvez pas le faire dans l’atsortingbut placeholder. Vous ne pouvez même pas coder les nouvelles lignes comme HTML
dans un espace réservé.
Une petite démo:
Vous ne pouvez pas le faire avec du HTML pur, mais ce plugin jQuery vous laissera: 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 sur le 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 utile à l’échelle mondiale. J’ai modifié le concept pour qu’il puisse être ajouté à n’importe quelle page sans répercussion.
http://jsfiddle.net/pdXRx/297/
Demo: 5 different textarea placeholder behaviors from a single JS
Modified behaviors
Standard behaviors
Le javascript est très simple
Utilisez
à la place de /n
cela changera la ligne.
J’ai modifié le violon de @Richard Bronosky comme ça .
Il est préférable d’utiliser l’atsortingbut data-*
plutôt qu’un atsortingbut personnalisé. J’ai remplacé par
et quelques autres styles.
édité
Voici la réponse originale de Richard qui contient un extrait de code complet.
$('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'); } }).sortinggger('blur'); });
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é.
Démo sur le 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; }
Multiline textarea
placeholder
that works in Firefox
Je n’aime pas cacher la placeholder lorsque vous concentrez la zone de texte. J’ai donc créé une fonction de constructeur Placeholder
qui ressemble exactement au paramètre fictif intégré et fonctionne également dans d’autres navigateurs que Google Chrome. C’est très pratique car vous pouvez utiliser la fonction Placeholder
aussi souvent que vous le souhaitez et il n’a même pas besoin de jQuery.
MODIFIER:
Il gère maintenant aussi des cas particuliers, comme l’insertion de l’espace réservé, correctement.
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 = Ssortingng.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; }