textarea の改行と white-space と readonly
◆ nowrap にすると
◆ Chrome は readonly のときのみ div などと同じ
◆ readonly がないと改行はそのまま表示される
◆ Edge は readonly があっても常に改行が反映される
◆ IE/Firefox は常に改行が無視される
◆ 入力するとエンター押しても半角スペースか何も起きないけど value には含まれる
◆ Chrome は readonly のときのみ div などと同じ
◆ readonly がないと改行はそのまま表示される
◆ Edge は readonly があっても常に改行が反映される
◆ IE/Firefox は常に改行が無視される
◆ 入力するとエンター押しても半角スペースか何も起きないけど value には含まれる
久々に予想外のところでブラウザごとの違いに出会いました
textarea の右端で自動改行をしてほしくなかったので
という CSS を指定したのですが \n まで改行がなくなってしまいます
CSS 的には正しい気がするのですが いつもはこれで動いていた気がするのでどうして?と思ったら readonly 属性の有無で結果が変わっていました
こんなページをつくって開きます
上側 a の textarea は readonly がついていて 下側の b の textarea は readonly のない通常の textarea です
Chrome で開くと
readonly がある上側は div などと同じで \n も無視されます
下側では改行は反映されて表示されます
readonly があって編集されないなら入力用の特別な textarea というより div などと同じただのテキスト扱いという感じです
\n で改行されないとユーザがエンターを押しても何も起きなくなるので入力できるときは改行は反映させてるということでしょうか
Edge では readonly 関係なく改行が反映されます
もともとこれを想定していました
\n も無視したいなら textarea を使うべきじゃないという考えです
常に \n が無視されます
入力できる状態でエンターを入力しても改行はされません
半角スペースひとつ分スペースがあきます
連続して入力しても 2 つ目以降は無視されます
textarea.value で値を取得すると入力した改行が含まれます
こんな使い方はまずしないと思うので textarea では \n は絶対反映でも良いと思うのですけどね
<br> をいれることができないものですし \n を <br> 扱いしても困らないと思います
本来 CSS の white-space は nowrap にすると <br> タグ以外の改行は無視されます
改行を反映して かつ折り返さないという pre に設定すれば readonly の有無などに影響されず目的のものにできます
textarea の右端で自動改行をしてほしくなかったので
.nowrap-textarea {
white-space: nowrap;
}
という CSS を指定したのですが \n まで改行がなくなってしまいます
CSS 的には正しい気がするのですが いつもはこれで動いていた気がするのでどうして?と思ったら readonly 属性の有無で結果が変わっていました
readonly があると普通のテキストみたいになる
<!doctype html>
<style>
textarea{
white-space: nowrap;
height: 80px;
}
</style>
<div><textarea id="a" readonly></textarea></div>
<div><textarea id="b"></textarea></div>
<script>
a.value = "a\nb"
b.value = "a\nb"
</script>
こんなページをつくって開きます
上側 a の textarea は readonly がついていて 下側の b の textarea は readonly のない通常の textarea です
Chrome で開くと
a b
a
b
readonly がある上側は div などと同じで \n も無視されます
下側では改行は反映されて表示されます
readonly があって編集されないなら入力用の特別な textarea というより div などと同じただのテキスト扱いという感じです
\n で改行されないとユーザがエンターを押しても何も起きなくなるので入力できるときは改行は反映させてるということでしょうか
ブラウザごとの違い
変だけどなんか納得行ったので仕様かなと思ったのですが ブラウザごとの違いがありましたEdge
a
b
a
b
Edge では readonly 関係なく改行が反映されます
もともとこれを想定していました
\n も無視したいなら textarea を使うべきじゃないという考えです
IE / Firefox
今回は珍しく IE と Firefox が同じ結果でしたa b
a b
常に \n が無視されます
入力できる状態でエンターを入力しても改行はされません
半角スペースひとつ分スペースがあきます
連続して入力しても 2 つ目以降は無視されます
textarea.value で値を取得すると入力した改行が含まれます
こんな使い方はまずしないと思うので textarea では \n は絶対反映でも良いと思うのですけどね
<br> をいれることができないものですし \n を <br> 扱いしても困らないと思います
対処方法
ブラウザごとに違うし readonly によっても違いますが white-space: nowrap というものを使ってることが原因です本来 CSS の white-space は nowrap にすると <br> タグ以外の改行は無視されます
改行を反映して かつ折り返さないという pre に設定すれば readonly の有無などに影響されず目的のものにできます