Insérer un saut de ligne à l’intérieur de l’atsortingbut espace réservé d’une zone de texte?

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

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

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.


Un joli petit piratage

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/

  • 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 le 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!


Une meilleure solution

Découvrez le JSFiddle .

  • Cette solution positionne une div derrière la zone de texte.
  • Certains javascript sont utilisés pour modifier la couleur de fond de la zone de texte, masquer 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 police, d’où les deux mixins.
  • La 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.
  • Régler 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.
  • Assurez-vous que la hauteur minimale sur la zone de texte est suffisante pour couvrir l’intégralité de votre espace réservé à sa plus petite largeur. **

Capture d'écran de JSFiddle

HTML:

 
First Line
Second Line
Third Line

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

entrer la description de l'image ici

  

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:

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

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.

HTML

  

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

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