回答編集履歴
1
「追記」部分を追加
test
CHANGED
|
@@ -49,3 +49,67 @@
|
|
|
49
49
|
ただし、```font-family``` ```font-size``` ```line-height```を指定しても、ChromeよりもFirefoxの```scrollHeight```のほうが1ピクセル大きくなりました。
|
|
50
50
|
|
|
51
51
|
この点、ブラウザ間の微妙な差、ということかと思います…。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
##追記（8月12日22:40）
|
|
58
|
+
|
|
59
|
+
質問に「補足」として書かれた、
|
|
60
|
+
|
|
61
|
+
> 「一旦<textArea>をレンダリングした後、scrollheightを取得して<textarea>のheightより大きければ、scrollHeightの値でheightを再調整する」
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
この方法でコンテンツの高さ（```scrollHeight```で取得）と```textarea```の高さを同じにするのがいいかと思います。
|
|
66
|
+
|
|
67
|
+
こんなコードでしょうか。
|
|
68
|
+
|
|
69
|
+
```JavaScript
|
|
70
|
+
|
|
71
|
+
var img = document.getElementById('imgTest');
|
|
72
|
+
|
|
73
|
+
var imgHeight = img.scrollHeight;
|
|
74
|
+
|
|
75
|
+
var imgWidth = img.scrollWidth;
|
|
76
|
+
|
|
77
|
+
img.style.height = imgHeight + 'px';
|
|
78
|
+
|
|
79
|
+
img.style.width = imgWidth 'px';
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
var txt = document.getElementById('txtAreaTest_textarea');
|
|
84
|
+
|
|
85
|
+
var txtHeight = txt.scrollHeight;
|
|
86
|
+
|
|
87
|
+
var txtWidth = txt.scrollWidth;
|
|
88
|
+
|
|
89
|
+
txt.style.height = txtHeight + 'px';
|
|
90
|
+
|
|
91
|
+
txt.style.width = txtWidth + 'px';
|
|
92
|
+
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
問題点は、このコードだと、
|
|
96
|
+
|
|
97
|
+
- Firefox→フォントを問わず期待通り動作
|
|
98
|
+
|
|
99
|
+
- **Chrome→Arialなど一部フォントを```font-family```で設定した場合のみ、スクロールバーが出ます**
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
（これに気がついたときは目から汗が…）
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
とりあえずの対処法として思いつくのは、
|
|
108
|
+
|
|
109
|
+
- Chromeでテストをして、期待通りに動作するフォントを選ぶ。ただし、Arlal、メイリオ、MS Pゴシックなどはだめでした。
|
|
110
|
+
|
|
111
|
+
- ```txtHeight + 'px';``` → ```txtHeight + 20 + 'px'```などとしてスクロールバーの高さ・幅＋αを```textarea```の高さに足す
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
といったところでしょうか…。「いいかと思います」と言いながら申し訳ありません。
|