wake-up-neo.net

Können Sie mehrzeiligen HTML5-Platzhaltertext in einem <textarea> haben?

Ich habe Geistertext in Textfeldern, die verschwinden, wenn Sie sie mithilfe des Platzhalterattributs von HTML5 darauf konzentrieren:

<input type="text" name="email" placeholder="Enter email"/>

Ich möchte den gleichen Mechanismus verwenden, um mehrzeiligen Platzhaltertext in einem Textbereich zu haben, vielleicht etwa so:

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

Aber diese \ns erscheinen im Text und verursachen keine Zeilenumbrüche ... Gibt es eine Möglichkeit, einen mehrzeiligen Platzhalter zu haben?

UPDATE: Die einzige Möglichkeit, dies zu erreichen, war die Verwendung des jQuery Watermark-Plugins , das HTML im Platzhaltertext akzeptiert:

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});
142
at.

Die Spezifikation erlaubt keine Zeilenvorschub- oder Wagenrücklaufzeichen.

Das Platzhalterattribut stellt einen kurzen Hinweis (ein Wort oder eine kurze Phrase) dar, der den Benutzer bei der Dateneingabe unterstützen soll. Ein Hinweis könnte ein .__ sein. Beispielwert oder eine kurze Beschreibung des erwarteten Formats. Das Wenn das Attribut angegeben ist, muss es einen Wert haben, der kein U + 000A .__ enthält. LINE FEED (LF) oder U + 000D CARRIAGE RETURN (CR) Zeichen.

Offensichtlich wird empfohlen, ein title-Attribut länger zu verwenden.

Bei einem längeren Hinweis oder einem anderen Hinweistext lautet das Attribut title mehr angemessen.

EDIT (1/8/18):

Bei <textarea> scheint dies nicht der Fall zu sein. Die Spezifikation beschreibt tatsächlich, dass der Wagenrücklauf + Zeilenumbrüche vom Browser als solche dargestellt werden MUSS.

Benutzeragenten sollten diesen Hinweis an den Benutzer weitergeben, wenn der Wert des Elements die leere Zeichenfolge ist und das Steuerelement nicht fokussiert ist (z. B. indem es in einem leeren, nicht fokussierten Steuerelement angezeigt wird). Alle U + 000D CARRIAGE RETURN U + 000A LINE FEED-Zeichenpaare (CRLF) im Hinweis sowie alle anderen U + 000D CARRIAGE RETURN (CR) - und U + 000A LINE FEED (LF) -Zeichen im Hinweis müssen behandelt werden als Zeilenumbruch beim Rendern des Hinweises.

Siehe Dokumente: http://w3c.github.io/html/sec-forms.html#element-attrdef-textarea-placeholder
Auch in MDN nachgedacht: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

FWIW, wenn ich Chrome 63.0.3239.132 versuche, funktioniert es tatsächlich so, wie es soll.

76
Ionuț G. Stan

In most (siehe Details unten) Browsern erlaubt das Bearbeiten des Platzhalters in Javascript mehrzeiligen Platzhalter . Wie bereits gesagt, entspricht es nicht der Spezifikation und sollte nicht erwartet werden es funktioniert in der zukunft (edit: es funktioniert).

Dieses Beispiel ersetzt den Platzhalter all mehrzeiliger Textbereiche.

var textAreas = document.getElementsByTagName('textarea');

Array.prototype.forEach.call(textAreas, function(elem) {
    elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});
<textarea class="textAreaMultiline" 
          placeholder="Hello, \nThis is multiline example \n\nHave Fun"
          rows="5" cols="35"></textarea>

JsFiddle Schnipsel.

Expected result


Aufgrund von Kommentaren scheint es so, als würde ein Browser diesen Hack akzeptieren und andere nicht.
Dies ist das Ergebnis von Tests, die ich ausgeführt habe (mit browsertshots und browserstack ).

  • Chrome:> = 35.0.1916.69
  • Firefox:> = 35.0 (Ergebnisse variieren je nach Plattform)
  • IE:> = 10
  • KHTML-basierte Browser: 4.8
  • Safari: Nein (getestet = Safari 8.0.6 Mac OS X 10.8)
  • Opera: Nein (getestet <= 15.0.1147.72)

Basierend auf statistics bedeutet dies, dass sie auf etwa 88,7% der aktuell verwendeten (Oct 2015) - Browser funktioniert.

Update: Heute funktioniert es mindestens auf 94,4% der aktuell verwendeten (Juli 2018) Browser.

63
Cyrbil

Ich finde, wenn der Browser viele Leerzeichen verwendet, wird er vom Browser richtig verpackt. Machen Sie sich keine Sorgen über eine genaue Anzahl von Leerzeichen, werfen Sie einfach eine Menge hinein und der Browser sollte korrekt auf das erste Zeichen ohne Leerzeichen in der nächsten Zeile zugreifen.

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>
58

Es gibt einen Hack, der es ermöglicht, mehrzeilige Platzhalter in Webkit-Browsern hinzuzufügen. Früher funktionierte Chrome, aber in neueren Versionen wurde es entfernt:


Fügen Sie zunächst wie üblich die erste Zeile Ihres Platzhalters zu html5 hinzu

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

dann fügen Sie den Rest der Zeile mit css hinzu:

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

Wenn Sie Ihre Leitungen an einem Ort aufbewahren möchten, können Sie Folgendes versuchen. Der Nachteil ist, dass andere Browser als Chrome, Safari, Webkit-etc. zeige nicht mal die erste Zeile:

<textarea id="text2" placeholder="." rows="10"></textarea>​

dann fügen Sie den Rest der Zeile mit css hinzu:

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

Demo Fiddle

Es wäre sehr schön, wenn s.o. könnte eine ähnliche Demo für Firefox erhalten.

23
Gottox

Die html5-Spezifikation lehnt ausdrücklich neue Zeilen im Platzhalterfeld ab. Versionen von Webkit / werden/ neue Zeilen einfügen, wenn sie mit Zeilenvorschüben im Platzhalter angezeigt werden. Dies ist jedoch ein falsches Verhalten und sollte nicht als verlässlich angesehen werden.

Ich denke, Absätze sind für w3 nicht kurz genug;)

4
Silent Penguin

Wenn Sie AngularJS verwenden, können Sie einfach Klammern verwenden, um das zu platzieren, was Sie möchten: Hier ist eine Geige.

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>
2
ross_troha

Wenn Ihre textarea eine statische Breite hat, können Sie eine Kombination aus geschützten Leerzeichen und automatischem Textbereich verwenden. Ersetzen Sie einfach Leerzeichen in nbsp für jede Zeile und stellen Sie sicher, dass zwei benachbarte Zeilen nicht in eine Zeile passen. In der Praxis line length > cols/2.

Dies ist nicht der beste Weg, könnte aber die einzige Cross-Browser-Lösung sein.

<textarea class="textAreaMultiligne" 
          placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
          rows="5" cols="35"></textarea>

2
Krzysiek

Sie können es mit CSS versuchen, es funktioniert für mich. Hier ist das Attribut placeholder=" " erforderlich.

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
    content: "1st line...\A2nd line...\A3rd line...";
}
</style>
1
Jeffrey Neo

nach MDN

Wagenrücklauf oder Zeilenvorschub innerhalb des Platzhaltertextes müssen beim Rendern des Hinweises als Zeilenumbrüche behandelt werden.

Das heißt, wenn Sie einfach zu einer neuen Zeile springen, sollte diese korrekt gerendert werden. Das heißt.

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

sollte so rendern:

 enter image description here

1
LaundroMat

Bootstrap + contenteditable + mehrzeiliger Platzhalter

Demo: https://jsfiddle.net/39mptojs/4/

basierend auf der Antwort von @cyrbil und @daniel

Verwenden Sie Bootstrap, jQuery und https://github.com/gr2m/bootstrap-expandable-input , um Platzhalter in contenteditable zu aktivieren.

Verwenden Sie "Platzhalter ersetzen" und fügen Sie "white-space: pre" zu css hinzu. Mehrzeiliger Platzhalter wird angezeigt.

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;
}
0
Miha Pirnat

in php mit Funktion 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>';
0
Vlad

Reagieren:

Wenn Sie React verwenden, können Sie dies wie folgt tun:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}
0
firetiger77

Ich glaube nicht, dass dies nur mit html/css möglich ist. Möglicherweise kann JavaScript oder eine andere Art von Hack verwendet werden - zusätzliche Leerzeichen, um den Text in die nächste Zeile zu verschieben usw.

0
user887958