Czy możesz mieć wielowierszowy tekst zastępczy HTML5 w <textarea>?

152

Mam tekst widmowy w polach tekstowych, który znika, gdy skupisz się na nich za pomocą atrybutu zastępczego HTML5:

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

Chcę użyć tego samego mechanizmu, aby mieć wielowierszowy tekst zastępczy w obszarze tekstu, może coś takiego:

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

Ale te \nznaki pojawiają się w tekście i nie powodują nowych linii ... Czy istnieje sposób, aby mieć wielowierszowy symbol zastępczy?

AKTUALIZACJA : Jedynym sposobem, w jaki udało mi się to uruchomić, było użycie wtyczki jQuery Watermark , która akceptuje HTML w tekście zastępczym:

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});
w.
źródło
Wydaje się, że IE obsługuje to poprawnie. Firefox OTOH po prostu ignoruje nowe linie
ekkis,
1
stackoverflow.com/questions/7312623/… to bardzo podobne pytanie z dobrymi odpowiedziami.
Lloyd Dewolf
jeśli napotykasz to i używasz js do ustawienia wartości, sprawdź css, white-spaceaby upewnić się, że jest ustawiona poprawnie, np. pre-wrap
Cory Mawhorter
Z tego drugiego pytania: &#10;działa wszędzie oprócz Safari.
Sphinxxx

Odpowiedzi:

82

W przypadku <textarea>s specyfikacja wyraźnie określa, że ​​powrót karetki + podziały wierszy w atrybucie zastępczym MUSZĄ być renderowane przez przeglądarkę jako podziały wierszy.

Programy użytkownika powinny przedstawiać tę wskazówkę użytkownikowi, gdy wartością elementu jest pusty ciąg, a kontrolka nie jest fokusem (np. Wyświetlając ją wewnątrz pustej nieostrej kontrolki). Wszystkie znaki U + 000D CARRIAGE RETURN U + 000A LINE FEED (CRLF) w podpowiedzi, a także wszystkie inne znaki U + 000D CARRIAGE RETURN (CR) i U + 000A LINE FEED (LF) w podpowiedzi muszą być traktowane jako podziały wierszy podczas renderowania wskazówki.

Odzwierciedlone również w MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, kiedy próbuję na Chrome 63.0.3239.132, rzeczywiście działa tak, jak powinien.

Ionuț G. Stan
źródło
37
poza tym, że atrybut title nie zachowuje się w ten sam sposób, tj. nie wyświetla treści widmowych. w rzeczywistości idealnie byłoby, gdyby symbole zastępcze obsługiwały wiele wierszy dla obszarów tekstowych, ponieważ obszary tekstowe są elementami wieloliniowymi. szkoda, że ​​specyfikacja na to nie pozwala. Myślę, że hacki będą musiały wystarczyć. westchnienie
ekkis
71

W większości przeglądarek (zobacz szczegóły poniżej) edycja symbolu zastępczego w javascript pozwala na użycie wielowierszowego symbolu zastępczego. Jak już powiedziano, nie jest zgodny z specyfikacją i nie należy oczekiwać, że zadziała w przyszłości (edytuj: działa).

Ten przykład zastępuje wszystkie symbole zastępcze obszaru tekstu wielowierszowego.

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

Spodziewany wynik

Spodziewany wynik


Na podstawie komentarzy wydaje się, że niektóre przeglądarki akceptują ten hack, a inne nie.
To są wyniki testów, które przeprowadziłem (ze zrzutami przeglądarki i stosem przeglądarki )

  • Chrome:> = 35.0.1916.69
  • Firefox:> = 35.0 (wyniki różnią się w zależności od platformy)
  • IE:> = 10
  • Przeglądarki oparte na KHTML: 4.8
  • Safari: Nie (testowano = Safari 8.0.6 Mac OS X 10.8)
  • Opera: Nie (przetestowano <= 15.0.1147.72)

W połączeniu z tymi statystykami oznacza to, że działa na około 88,7% obecnie (październik 2015) przeglądarek używanych.

Aktualizacja : Dziś działa na co najmniej 94,4% obecnie (lipiec 2018 r.) Używanych przeglądarek.

Cyrbil
źródło
1
Ten przykład jsfiddle w ogóle nie działa ... Jest tylko wielowierszowy ze względu na rozmiar obszaru tekstowego.
sebnukem
2
Wystąpiła literówka, ale nie mogę edytować, ponieważ StackOverflow wyświetla komunikat o błędzie „Edycje muszą mieć co najmniej 6 znaków”. Twoja klasa powinna być multilineniemultiligne
Daniel Loureiro
@sebnukem: Działa na większości przeglądarek, które testowałem. I nie jest to kwestia rozmiaru textarea. Czy możesz podać więcej informacji na temat swojego problemu?
Cyrbil
Wygląda na to, że nie działa na safari ... - \ n znika, ale wszystko jest w jednej linii
Hackeron,
1
@Jroonk: Mogę to potwierdzić. Nie jest to spowodowane chromem, ale Apple zmuszającym dowolną przeglądarkę do korzystania z jej IOS WKWebView. Następnie żadna przeglądarka na IOS nie wyrenderuje poprawnie tego hacka, dopóki tego WKWebViewnie zrobi.
Cyrbil,
59

Uważam, że jeśli wykorzystasz dużo spacji, przeglądarka odpowiednio ją zapakuje. Nie martw się o użycie dokładnej liczby spacji, po prostu wrzuć tam dużo, a przeglądarka powinna poprawnie zawinąć do pierwszego znaku innego niż spacja w następnej linii.

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>
Thomas Hunter II
źródło
2
Tak, wielowierszowe symbole zastępcze nie są obsługiwane w różnych przeglądarkach, odkryłem, że najnowsze safari obsługuje, ale zdecydowanie nie jest obsługiwane na IOS5
Tom
7
to nie działa dla mnie ani w IE, ani w Firefoksie Windows. po prostu wstawia spacje, o które prosiłem
ekkis,
Chrome 37 wyświetla tekst zastępczy w obszarze tekstu bez usuwania nowych linii. Czy ktoś wie, jak nazywa się „funkcja”, abym mógł a) jej poszukać i b) przetestować?
Ben,
23

Rzeczywiście istnieje hack, który umożliwia dodawanie wielowierszowych symboli zastępczych w przeglądarkach Webkit, Chrome działał, ale w nowszych wersjach usunęli go:


Najpierw jak zwykle dodaj pierwszy wiersz swojego symbolu zastępczego do HTML5

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

następnie dodaj resztę linii przez css:

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

Jeśli chcesz zachować swoje linie w jednym miejscu, możesz spróbować następujących rozwiązań. Wadą tego jest to, że inne przeglądarki niż Chrome, Safari, Webkit itp. nawet nie pokazuj pierwszej linii:

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

następnie dodaj resztę linii przez css:

#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

Byłoby wspaniale, gdyby tak można było uzyskać podobne demo działające na Firefoksie.

Gottox
źródło
dzięki za udostępnienie linku do skrzypiec. ułatwia weryfikację zachowania w różnych przeglądarkach. w IE 10 obie wersje zawodzą, a także w FF 12 (Windows). szkoda, że. Safari 6.1 działa :(
ekkis
Już nie działa w Chrome - zakładam, że od dawna.
Mike Rockétt
6

Jeśli używasz AngularJS, możesz po prostu użyć nawiasów klamrowych, aby umieścić w nim wszystko, co chcesz: Oto skrzypce.

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>
ross_troha
źródło
1
Używam podobnego podejścia, ale nie działa w Safari i Firefox
stan
6

Według MDN ,

Powroty karetki lub przesunięcia wiersza w tekście zastępczym muszą być traktowane jako znaki końca wiersza podczas renderowania wskazówki.

Oznacza to, że jeśli po prostu przeskoczysz do nowej linii, powinna zostać poprawnie wyrenderowana. To znaczy

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

powinien wyglądać następująco:

wprowadź opis obrazu tutaj

Automat pralniczy
źródło
3

Specyfikacja HTML5 wyraźnie odrzuca nowe wiersze w polu zastępczym. Wersje Webkit / will / insert new lines, gdy są przedstawiane z wysuwami wiersza w symbolu zastępczym, jednak jest to nieprawidłowe zachowanie i nie należy na nim polegać.

Myślę, że akapity nie są wystarczająco krótkie dla w3;)

Silent Penguin
źródło
1
Zachowanie Webkita nie jest nieprawidłowe, ponieważ specyfikacja nie mówi, co musi się stać, jeśli CR / LF istnieją.
Christian,
1
@Christian Teraz tak, mówi: „Programy użytkownika powinny przedstawić tę wskazówkę użytkownikowi, po usunięciu z niej znaków końca linii…”. Mówi się o usuwaniu znaków końca wiersza: „Gdy agent użytkownika ma usunąć znaki końca wiersza z ciągu, musi usunąć z tego ciągu wszystkie znaki„ LF ”(U + 000A) i„ CR ”(U + 000D). ”.
Richard Turner
Ta odpowiedź nie jest już prawdą. Spec teraz wyraźnie wymaga, by w linebreaks zastępczy być renderowane jako wierszami.
Clonkex
3

Reagować:

Jeśli używasz Reacta, możesz to zrobić w następujący sposób:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}
firetiger77
źródło
2

Jeśli textareamasz statyczną szerokość, możesz użyć kombinacji nierozdzielającej spacji i automatycznego zawijania obszaru tekstu. Po prostu zamień spacje na nbsp dla każdej linii i upewnij się, że dwie sąsiednie linie nie pasują do jednej. W praktyce line length > cols/2.

To nie jest najlepszy sposób, ale może to być jedyne rozwiązanie dla różnych przeglądarek.

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

Krzysiek
źródło
1

Możesz spróbować użyć CSS, to działa dla mnie. Atrybut placeholder=" "jest tutaj wymagany.

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

w php z funkcją 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>';
Vlad
źródło
0

Nie sądzę, żeby było to możliwe przy samym html / css. Może to być możliwe przy użyciu JavaScript lub innego rodzaju hackowania - dodatkowe spacje, aby przesunąć tekst do następnej linii itp.


źródło
0

Bootstrap + możliwość edycji treści + wielowierszowy symbol zastępczy

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

na podstawie odpowiedzi @cyrbil i @daniel

Korzystanie z Bootstrap, jQuery i https://github.com/gr2m/bootstrap-expandable-input aby włączyć symbol zastępczy w contenteditable.

Używając javascript „zastępczy symbol zastępczy” i dodając „odstępy: pre” do css, wyświetlany jest wielowierszowy symbol zastępczy.

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;
}
Miha Pirnat
źródło
-1

Rozwiązanie znaku wodnego w oryginalnym poście działa świetnie. Dzięki za to. Na wypadek, gdyby ktoś tego potrzebował, oto dyrektywa kątowa.

(function () {
  'use strict';

  angular.module('app')
    .directive('placeholder', function () {
      return {
        restrict: 'A',
        link:     function (scope, element, attributes) {
          if (element.prop('nodeName') === 'TEXTAREA') {
            var placeholderText = attributes.placeholder.trim();

            if (placeholderText.length) {
              // support for both '\n' symbol and an actual newline in the placeholder element
              var placeholderLines = Array.prototype.concat
                .apply([], placeholderText.split('\n').map(line => line.split('\\n')))
                .map(line => line.trim());

              if (placeholderLines.length > 1) {
                element.watermark(placeholderLines.join('<br>\n'));
              }
            }
          }
        }
      };
    });
}());
Yura Fedoriv
źródło