<textarea>に複数行のHTML5プレースホルダーテキストを含めることはできますか?


152

HTML5のプレースホルダー属性を使用してそれらに集中するとテキストフィールドにゴーストテキストが表示されなくなります。

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

同じメカニズムを使用して、textareaに複数行のプレースホルダーテキストを設定します。

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

しかし、これら\nのsはテキストに表示され、改行を引き起こしません...複数行のプレースホルダーを作成する方法はありますか?

更新:これを機能させる唯一の方法は、プレースホルダーテキストでHTMLを受け入れる jQuery Watermarkプラグインを利用することでした:

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

IEはそれを適切に処理するようです。Firefox OTOHは改行を無視します
ekkis

1
stackoverflow.com/questions/7312623/…も非常によく似た質問で、良い答えがあります。
ロイド・デウルフ2014

これに遭遇し、jsを使用して値を設定する場合はcss white-spaceをチェックして、値が正しく設定されていることを確認してください。たとえば、
プリラップ

その別の質問から:&#10;Safariを除くすべての場所で機能します。
Sphinxxx

回答:


82

以下のため<textarea>仕様では、具体的には、プレースホルダの属性にそのキャリッジリターン+改行は、ブラウザによって改行としてレンダリングする必要概説します。

要素の値が空の文字列であり、コントロールがフォーカスされていない場合(ユーザーが空白のフォーカスされていないコントロール内に表示するなど)、ユーザーエージェントはこのヒントをユーザーに提示する必要があります。ヒント内のすべてのU + 000D CARRIAGE RETURN U + 000A LINE FEED文字ペア(CRLF)、およびヒント内の他のすべてのU + 000D CARRIAGE RETURN(CR)およびU + 000A LINE FEED(LF)文字は、処理する必要がありますヒントをレンダリングするときに改行します。

MDNにも反映:https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW、私がChrome 63.0.3239.132を試してみると、それは言う通りに実際に機能します。


37
タイトル属性が同じように動作しないことを除いて、ゴーストコンテンツは表示されません。テキスト領域は複数行の生き物であるため、実際にはプレースホルダーがテキスト領域の複数行をサポートすることは完全に適切です。残念ながら、仕様では許可されていません。私はハックがしなければならないだろうと思います。ため息
ekkis

71

上のほとんどの JavaScriptでプレースホルダは、複数行のプレースホルダを可能に編集し、ブラウザ(詳細は下記を参照してください)。言われたように、それは仕様に準拠していませんいないため、将来的に機能するとは期待できません(編集:機能します)。

この例は、すべての複数行のtextareaのプレースホルダーを置き換えます

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スニペット。

期待される結果

期待される結果


コメントによると、一部のブラウザーはこのハッキングを受け入れ、他のブラウザーは受け入れないようです。
これは私が実行したテストの結果です(browsertshotsbrowserstackで

  • Chrome:> = 35.0.1916.69
  • Firefox:> = 35.0(結果はプラットフォームによって異なります)
  • IE:> = 10
  • KHTMLベースのブラウザー:4.8
  • Safari:いいえ(テスト済み= Safari 8.0.6 Mac OS X 10.8)
  • Opera:いいえ(テスト済み= 15.0.1147.72)

これらの統計と融合しているため、現在(2015年10月)に使用されているブラウザーの約88.7%で動作します。

更新:現在、2018年7月に現在使用されているブラウザの少なくとも94.4%で動作します。


1
そのjsfiddleの例はまったく機能しません... textareaのサイズのため、複数行のみです。
sebnukem 2014年

2
入力ミスがありますが、StackOverflowから「編集は6文字以上である必要があります」というエラーが表示されるため、編集できません。あなたのクラスはすべきではありmultilineませんmultiligne
ダニエルLoureiro

@sebnukem:私がテストしたほとんどのブラウザで動作します。そして、それはtextareaのサイズの問題ではありません。発生した問題の詳細を教えていただけますか?
シルビル

サファリでは動作しないようです
...-

1
@Jroonk:確認できます。これはChromeが原因ではなく、AppleがブラウザにIOSの使用を強制しているためですWKWebView。その後、IOS上のブラウザは、レンダリングされるまでこのハックを適切にレンダリングWKWebViewしません。
シルビル2018年

59

多くのスペースを使用すると、ブラウザがそれを適切に折り返すことがわかります。正確な数のスペースを使用することについて心配する必要はありません。そこにたくさん投げ入れれば、ブラウザは次の行の最初のスペース以外の文字に適切に折り返すはずです。

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

2
はい、複数行のプレースホルダーはクロスブラウザーではサポートされていません。最新のSafariではサポートされていますが、IOS5ではサポートされていません
Tom

7
これは、IEでもFirefox Windowsでも機能しません。要求したスペースが挿入されるだけです
ekkis

Chrome 37は、改行を削除せずにテキストエリアにプレースホルダーテキストを表示しています。「機能」の名前が何であるかを誰かが知っているので、私はそれを探して、b)テストすることができますか?
2014

23

Webkitブラウザーで複数行のプレースホルダーを追加できるようにする実際のハックがあります。以前はChromeが機能していましたが、最近のバージョンでは削除されています。


最初に、プレースホルダーの最初の行を通常どおりhtml5に追加します

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

次に、行の残りをcssで追加します。

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

行を1か所に留めておきたい場合は、次の方法を試してください。これの欠点は、クロム、サファリ、ウェブキットなど以外のブラウザであることです。最初の行も表示しない:

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

次に、行の残りをcssで追加します。

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

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

デモフィドル

もしFirefoxで同様のデモが動作するようになれば、それは非常に素晴らしいことです。


フィドルリンクを提供していただきありがとうございます。さまざまなブラウザでの動作を簡単に確認できます。IE 10では両方のバージョンが失敗し、FF 12(Windows)でも失敗します。残念。Safari 6.1は動作します:(
ekkis 2013

Chromeでは動作しなくなりました-長い間、私は思います。
マイク・ロケット2017

6

AngularJSを使用している場合は、中かっこを使用して好きなものを配置できます:フィドルです。

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

1
私は同様のアプローチを使用していますが、SafariおよびFirefoxでは機能しません
stan

6

MDNよれば

ヒントをレンダリングするとき、プレースホルダーテキスト内の復帰または改行は改行として処理する必要があります。

つまり、新しい行にジャンプするだけで、正しくレンダリングされるはずです。すなわち

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

このようにレンダリングする必要があります:

ここに画像の説明を入力してください


3

html5仕様では、プレースホルダーフィールドの改行を明示的に拒否しています。Webkitのバージョンでは、プレースホルダーに改行が表示されると新しい行が/ will /挿入されますが、これは不正な動作であり、信頼してはなりません。

段落はw3には十分に短いと思います;)


1
CR / LFが存在する場合の仕様については仕様に記載されていないため、Webkitの動作は正しくあります。
クリスチャン

1
@Christian現在は、「ユーザーエージェントは、改行を取り除いた後、このヒントをユーザーに提示する必要があります...」と述べています。「ユーザーエージェントが文字列から改行を取り除く場合、ユーザーエージェントはその文字列から "LF"(U + 000A)と "CR"(U + 000D)の文字を削除する必要があります。 」
リチャードターナー

この答えはもはや真実ではありません。スペックは今明示プレースホルダでの改行を改行としてレンダリングされている必要があります。
Clonkex

3

反応:

Reactを使用している場合は、次のように実行できます。

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

2

textarea静的な幅がある場合は、改行なしスペースと自動テキストエリア折り返しの組み合わせを使用できます。すべての行でスペースをnbspに置き換え、2つの隣接する行が1つに収まらないことを確認してください。実際にはline length > cols/2

これは最善の方法ではありませんが、唯一のクロスブラウザソリューションになる可能性があります。

<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

CSSを使ってみてください。私にとってはうまくいきます。この属性placeholder=" "は必須です。

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

1

PHPで関数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

html / cssだけではそれは不可能だと思います。JavaScriptや他の種類のハックを使用して可能性があります-テキストを次の行にプッシュするための余分なスペースなど


0

Bootstrap + contenteditable + multiline placeholder

デモ:https : //jsfiddle.net/39mptojs/4/

@cyrbilおよび@danielの回答に基づく

Bootstrap、jQuery、およびhttps://github.com/gr2m/bootstrap-expandable-inputを使用して、contenteditableのプレースホルダーを有効にします。

"placeholder replace" javascriptを使用し、cssに "white-space:pre"を追加すると、複数行のプレースホルダーが表示されます。

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

元の投稿の透かしソリューションはうまく機能します。それをありがとう。誰かがそれを必要とする場合のために、ここにそれのための角度指令があります。

(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'));
              }
            }
          }
        }
      };
    });
}());
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.