textareaはデータの編集などでよく使うと思います。
Angularに限ったことではないですが、iOSのSafariでtextareaのvalueに改行込み(\n)の文字列を入れても改行されない時があります。
この記事の目次
改行されない
どういった時に改行されないかというと、html のレンダリングの後にtextareaのvalueに値を入れたときです。通信してデータを取ってきてtextareaに値を突っ込んでも改行されないということです。
改行コードを\r\nとかにしてもダメです。以下の画像のように改行がスペースになってしまいます。
解決方
解決法としては、値を入れた状態でレンダリングしてあげる、もしくは再レンダリングしてあげれば解決します。改行コードは\nで大丈夫です。
Angularだと*ngIfで値があるかどうかを確認してから、描画してあげるといいでしょう。
以下はdescriptionが空ならレンダリングしないようにしています。APIやFirebaseからデータを取得して文字列を代入してあげたらレンダリングするようにします。
1 2 3 4 5 6 7 8 |
<div *ngIf="description !=='' " class="input-comment"> <textarea no-padding maxlength="1000" placeholder="最大1000文字" [(ngModel)]="description" ></textarea> </div> |
問題なく改行されました。
Reactは多分、再レンダリングされるから問題ないんでしょうけど。こういうので、ハマってしまうと時間がもったいないですよね。是非参考になればと思います。
コメント