web-dev-qa-db-ja.com

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

HTML5のプレースホルダー属性を使用してテキストフィールドにフォーカスすると消えるテキストフィールドにゴーストテキストがあります。

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

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

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

しかし、それらの\nsはテキストに表示され、改行を引き起こしません...複数行のプレースホルダーを持つ方法はありますか？

UPDATE：これを機能させる唯一の方法は jQuery透かしプラグイン 、プレースホルダーテキストでHTMLを受け入れます：

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

<textarea>sの場合、 仕様 は、キャリッジリターン+プレースホルダー属性の改行をブラウザで改行として表示する必要があることを明確に示しています。

ユーザーエージェントは、要素の値が空の文字列であり、コントロールがフォーカスされていない場合（たとえば、空の非フォーカスコントロール内に表示することにより）、このヒントをユーザーに提示する必要があります。ヒント内のすべてのU + 000DキャリッジリターンU + 000A LINE FEED文字ペア（CRLF）、およびヒント内の他のすべてのU + 000Dキャリッジリターン（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を試してみると、実際に動作するはずです。

81
Ionuț G. Stan

most（以下の詳細を参照）ブラウザーでは、JavaScriptでプレースホルダーを編集すると、複数行のプレースホルダーが許可されます。既に述べたように、これは specification に準拠しておらず、将来動作することを期待すべきではありません（編集：動作します）。

この例は、all複数行のテキストエリアのプレースホルダーを置き換えます。

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

Expected result

コメントに基づいて、一部のブラウザはこのハックを受け入れ、他のブラウザは受け入れないようです。
これは、実行したテストの結果です（ browsertshots および browserstack で）

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

統計 に基づいて、これは、現在のの約88.7％で動作することを意味します（2015年10月）使用されているブラウザ。

Update：今日、少なくとも現在のの94.4％で動作します（2018年7月）はブラウザーを使用しました。

66
Cyrbil

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

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

実際には、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か所に保持したい場合は、次を試してください。これの欠点は、クロム、サファリ、webkitなど以外のブラウザです。最初の行も表示しないでください：

<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で同様のデモを実行できます。

23
Gottox

AngularJSを使用している場合は、中括弧を使用して、好きなものを何でも配置できます。 Here's a fiddle。

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

html5 spec は、プレースホルダーフィールドの新しい行を明示的に拒否します。 Webkitのバージョン/ will /は、プレースホルダーにラインフィードが表示されたときに新しい行を挿入しますが、これは不適切な動作であり、これに依存するべきではありません。

段落はw3に十分なほど短いとは思わない;）

3
Silent Penguin

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

CSSを使用してみてください、それは私のために動作します。ここには属性placeholder=" "が必要です。

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

反応：

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

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

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>

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

enter image description here

1
LaundroMat

Bootstrap + contenteditable + multiline placeholder

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

@cyrbilと@danielの回答に基づく

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

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

関数chr（​​13）を使用したphpの場合：

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

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

0
user887958