質問編集履歴
2
2019.10.07.11:34 - 冗長な文章を修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### 実現したいこと
|
|
1
|
+
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
inputのような「範囲を超えた分を左右キーで表示」を、divに実装したいです。
|
|
4
4
|
|
|
@@ -16,13 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
19
|
-
### 前提
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
尚、divの中身はtextareaの入力値をコピーしたものになります。
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
入力用のtextareaを隠し、表示用のdivにHTMLを加えるということです。
|
|
26
20
|
|
|
27
21
|
|
|
28
22
|
|
|
@@ -30,20 +24,20 @@
|
|
|
30
24
|
|
|
31
25
|
### 発生している問題
|
|
32
26
|
|
|
33
|
-
下記のコードで
|
|
27
|
+
下記のソースコードですが、表示用のdivの文字が長いとき、見えなくなってしまうのが問題です。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
34
|
-
|
|
31
|
+
先のinputでいえば「さしすせそ」あたりが見えなくなってしまうということです。
|
|
35
|
-
|
|
36
|
-
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
37
|
-
|
|
35
|
+
これを解決し、inputのような「範囲を超えた分を左右キーで表示」をdivにも実装したいわけです。
|
|
38
|
-
|
|
39
|
-
|
|
40
36
|
|
|
41
37
|
|
|
42
38
|
|
|
43
39
|
### 該当のソースコード
|
|
44
40
|
|
|
45
|
-
こちらになります。入力用に隠しているtextareaでは「範囲を超えた分を左右キーで表示」ができているように思えますが、表示用のdivではそれができない。というのが問題になります。
|
|
46
|
-
|
|
47
41
|
```html
|
|
48
42
|
|
|
49
43
|
<div class="box">
|
1
2019.10.06.16:14 - コードのstyleタグの閉じ忘れを修正し、読みやすいよう言語ごとに分割して表示しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -44,13 +44,19 @@
|
|
|
44
44
|
|
|
45
45
|
こちらになります。入力用に隠しているtextareaでは「範囲を超えた分を左右キーで表示」ができているように思えますが、表示用のdivではそれができない。というのが問題になります。
|
|
46
46
|
|
|
47
|
-
|
|
48
|
-
|
|
49
47
|
```html
|
|
50
48
|
|
|
49
|
+
<div class="box">
|
|
50
|
+
|
|
51
|
+
<textarea class="dammy"></textarea>
|
|
52
|
+
|
|
53
|
+
<div class="copy"></div>
|
|
54
|
+
|
|
51
|
-
<
|
|
55
|
+
</div>
|
|
56
|
+
|
|
52
|
-
|
|
57
|
+
```
|
|
58
|
+
|
|
53
|
-
|
|
59
|
+
```css
|
|
54
60
|
|
|
55
61
|
.box {
|
|
56
62
|
|
|
@@ -140,11 +146,9 @@
|
|
|
140
146
|
|
|
141
147
|
}
|
|
142
148
|
|
|
149
|
+
```
|
|
150
|
+
|
|
143
|
-
|
|
151
|
+
```jquery
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
<script>
|
|
148
152
|
|
|
149
153
|
// 入力
|
|
150
154
|
|
|
@@ -220,38 +224,12 @@
|
|
|
220
224
|
|
|
221
225
|
}
|
|
222
226
|
|
|
223
|
-
</script>
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
</head>
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
<body>
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
<div class="box">
|
|
236
|
-
|
|
237
|
-
<textarea class="dammy"></textarea>
|
|
238
|
-
|
|
239
|
-
<div class="copy"></div>
|
|
240
|
-
|
|
241
|
-
</div>
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
</body>
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
227
|
```
|
|
252
228
|
|
|
253
229
|
|
|
254
230
|
|
|
231
|
+
|
|
232
|
+
|
|
255
233
|
### 試したこと
|
|
256
234
|
|
|
257
235
|
上は「textareaの入力値をdivにコピーする」という方法ですが、他にも「contenteditableをtrueにする」という方法を試しました。これならば「範囲を超えた分を左右キーで表示」が可能です。
|