Bisakah Anda memiliki teks multiline HTML5 placeholder di <textarea>?


152

Saya memiliki teks hantu di bidang teks yang hilang saat Anda fokus pada mereka menggunakan atribut placeholder HTML5:

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

Saya ingin menggunakan mekanisme yang sama untuk memiliki teks tempat penampung multiline di sebuah textarea, mungkin seperti ini:

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

Tapi itu \nmuncul dalam teks dan tidak menyebabkan baris baru ... Apakah ada cara untuk memiliki placeholder multiline?

UPDATE : Satu-satunya cara saya membuat ini berfungsi adalah menggunakan plugin jQuery Watermark , yang menerima HTML dalam teks placeholder:

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

IE sepertinya menanganinya dengan benar. Firefox OTOH mengabaikan baris-baris baru
ekkis

1
stackoverflow.com/questions/7312623/… adalah pertanyaan yang sangat mirip dengan jawaban yang baik juga.
Lloyd Dewolf

jika Anda menjumpai ini dan menggunakan js untuk mengatur nilai, periksa css white-spaceuntuk memastikannya ditetapkan dengan benar misalnya pra-bungkus
Cory Mawhorter

Dari pertanyaan lain: &#10;bekerja di mana saja kecuali Safari.
Sphinxxx

Jawaban:


82

Untuk <textarea>s spec khusus menguraikan bahwa tombol kembali + jeda baris dalam atribut placeholder HARUS diterjemahkan sebagai linebreaks oleh browser.

Agen pengguna harus menyajikan petunjuk ini kepada pengguna ketika nilai elemen adalah string kosong dan kontrol tidak fokus (misalnya dengan menampilkannya di dalam kontrol kosong yang tidak fokus). Semua U + 000D CARRIAGE RETURN U + 000A LINE FEED pasangan karakter (CRLF) dalam petunjuk, serta semua U + 000D CARRIAGE RETURN (CR) dan karakter U + 000A LINE FEED (LF) dalam petunjuk, harus diperlakukan sebagai baris terputus ketika memberikan petunjuk.

Juga tercermin pada MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, ketika saya mencoba Chrome 63.0.3239.132, itu memang berfungsi seperti yang seharusnya.


37
kecuali bahwa atribut title tidak berperilaku dengan cara yang sama yaitu tidak menampilkan konten ghost. sebenarnya akan sangat tepat bagi penampung untuk mendukung beberapa baris untuk area teks karena area teks adalah makhluk multi-baris. Sayang sekali spec tidak mengizinkannya. Saya kira peretasan harus dilakukan. desah
ekkis

71

Pada sebagian besar (lihat detail di bawah) browser, mengedit placeholder di javascript memungkinkan placeholder multiline. Seperti yang telah dikatakan, itu tidak sesuai dengan spesifikasi dan Anda seharusnya tidak mengharapkannya bekerja di masa depan (edit: itu berfungsi).

Contoh ini menggantikan semua placeholder textarea multiline.

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>

Cuplikan JsFiddle .

Hasil yang diharapkan

Hasil yang diharapkan


Berdasarkan komentar tampaknya beberapa browser menerima hack ini dan yang lainnya tidak.
Ini adalah hasil dari tes yang saya jalankan (dengan browsertshots dan browserstack )

  • Chrome:> = 35.0.1916.69
  • Firefox:> = 35.0 (hasil bervariasi di platform)
  • IE:> = 10
  • Browser berbasis KHTML: 4.8
  • Safari: Tidak (diuji = Safari 8.0.6 Mac OS X 10.8)
  • Opera: Tidak (diuji <= 15.0.1147.72)

Menyatu dengan statistik tesis ini, ini berarti bahwa ia berfungsi pada sekitar 88,7% dari browser yang digunakan saat ini (Oktober 2015) .

Pembaruan : Hari ini, ia berfungsi pada setidaknya 94,4% dari browser yang digunakan saat ini (Juli 2018) .


1
Contoh jsfiddle itu tidak berfungsi sama sekali ... Itu hanya multilined karena ukuran textarea.
sebnukem

2
Ada kesalahan ketik, tetapi saya tidak dapat mengedit karena StackOverflow memberi saya kesalahan "Suntingan minimal 6 karakter" ini. Kelas Anda seharusnya multilinetidakmultiligne
Daniel Loureiro

@sebnukem: Ini berfungsi pada sebagian besar browser yang telah saya uji. Dan itu bukan masalah ukuran textarea. Bisakah Anda memberikan informasi lebih lanjut tentang masalah yang Anda miliki?
Cyrbil

Tampaknya tidak berfungsi pada safari ... - \ n menghilang tetapi semuanya dalam satu baris
Hackeron

1
@Jroonk: Saya bisa memastikannya. Ini bukan karena chrome tetapi Apple memaksa browser apa pun untuk menggunakan iOS-nya WKWebView. Selanjutnya, browser apa pun di iOS tidak akan meretas hack ini dengan benar sampai akhirnya WKWebView.
Cyrbil

59

Saya menemukan bahwa jika Anda menggunakan banyak ruang, browser akan membungkusnya dengan benar. Jangan khawatir tentang menggunakan jumlah spasi yang pasti, cukup lempar banyak di sana, dan browser harus membungkus dengan benar ke karakter non-spasi pertama pada baris berikutnya.

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

2
Yap multiline placeholder tidak didukung crossbrowser, telah menemukan safari terbaru yang didukung tetapi jelas tidak didukung pada IOS5
Tom

7
itu tidak bekerja untuk saya di IE atau Firefox Windows. itu hanya menyisipkan spasi yang saya minta
ekkis

Chrome 37 sedang menampilkan teks placeholder dalam suatu textarea tanpa menghapus garis baru. Adakah yang tahu apa nama 'fitur' itu sehingga saya dapat a) mencarinya, dan b) mengujinya?
Ben

23

Sebenarnya ada peretasan yang memungkinkan untuk menambahkan tempat penampung multiline di peramban WebKit, Chrome digunakan untuk bekerja tetapi dalam versi yang lebih baru mereka menghapusnya:


Pertama tambahkan baris pertama placeholder Anda ke html5 seperti biasa

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

kemudian tambahkan sisa baris dengan css:

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

Jika Anda ingin menjaga dialog di satu tempat, Anda dapat mencoba yang berikut ini. Kelemahan dari ini adalah browser lain selain chrome, safari, webkit-dll. bahkan tidak menunjukkan baris pertama:

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

kemudian tambahkan sisa baris dengan 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

Akan sangat bagus, jika demikian bisa mendapatkan demo serupa bekerja di Firefox.


terima kasih telah menyediakan tautan biola. itu membuatnya mudah untuk memverifikasi perilaku di berbagai browser. pada IE 10 kedua versi gagal, serta pada FF 12 (Windows). Sayang sekali itu. Safari 6.1 berfungsi :(
ekkis

Tidak lagi berfungsi di Chrome - untuk waktu yang lama sekarang, saya kira.
Mike Rockétt

6

Jika Anda menggunakan AngularJS, Anda bisa menggunakan kawat gigi untuk meletakkan apa pun yang Anda suka di dalamnya: Ini biola.

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

1
Saya menggunakan pendekatan yang serupa tetapi tidak bekerja di Safari dan Firefox
stan

6

Menurut MDN ,

Pengembalian kereta atau umpan baris dalam teks placeholder harus diperlakukan sebagai jeda baris saat memberikan petunjuk.

Ini berarti bahwa jika Anda hanya melompat ke baris baru, itu harus diterjemahkan dengan benar. Yaitu

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

harus membuat seperti ini:

masukkan deskripsi gambar di sini


3

The HTML5 spesifikasi tegas menolak baris baru di bidang tempat dudukan. Versi Webkit / akan / menyisipkan baris baru saat disajikan dengan umpan baris di placeholder, namun ini adalah perilaku yang salah dan tidak boleh diandalkan.

Saya kira paragraf tidak cukup singkat untuk w3;)


1
Perilaku Webkit tidak salah karena spesifikasi tidak mengatakan apa yang harus terjadi jika CR / LF memang ada.
Christian

1
@Christian Tidak sekarang, katanya "Agen pengguna harus memberikan petunjuk ini kepada pengguna, setelah garis putus-putus dari itu ...". Ia mengatakan ini tentang stripping line break: "Ketika agen pengguna untuk menghapus garis putus dari string, agen pengguna harus menghapus" LF "(U + 000A) dan" CR "(U + 000D) karakter dari string itu. ".
Richard Turner

Jawaban ini tidak lagi benar. The spek sekarang tegas mengharuskan linebreaks di placeholder akan diberikan sebagai linebreaks.
Clonkex

3

Reaksi:

Jika Anda menggunakan Bereaksi, Anda dapat melakukannya sebagai berikut:

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

2

Jika Anda textareamemiliki lebar statis, Anda dapat menggunakan kombinasi ruang tidak putus dan pembungkus teks otomatis. Cukup ganti spasi ke nbsp untuk setiap baris dan pastikan bahwa dua garis tetangga tidak dapat masuk ke dalam satu baris. Dalam praktek line length > cols/2.

Ini bukan cara terbaik, tetapi bisa menjadi satu-satunya solusi lintas-browser.

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


1

Anda dapat mencoba menggunakan CSS, itu berfungsi untuk saya. Atribut placeholder=" "diperlukan di sini.

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

1

dalam php dengan fungsi 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

Saya tidak berpikir itu mungkin dengan html / css saja. Mungkin dimungkinkan menggunakan JavaScript atau sejenis hack lainnya - ruang ekstra untuk mendorong teks ke baris berikutnya, dll.


0

Bootstrap + contenteditable + placeholder multiline

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

berdasarkan jawaban @cyrbil dan @daniel

Menggunakan Bootstrap, jQuery, dan https://github.com/gr2m/bootstrap-expandable-input untuk mengaktifkan placeholder di contenteditable.

Menggunakan javascript "placeholder replace" dan menambahkan "white-space: pre" ke css, placeholder multiline ditampilkan.

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

-1

Solusi watermark pada postingan asli berfungsi dengan baik. Terimakasih untuk ini. Jika ada yang membutuhkannya, berikut adalah arahan sudut untuknya.

(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'));
              }
            }
          }
        }
      };
    });
}());
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.