質問編集履歴
2
2019.10.07.11:34 - 冗長な文章を修正しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
### 実現したいこと
|
|
1
|
+
### 前提・実現したいこと
|
|
2
2
|
inputのような「範囲を超えた分を左右キーで表示」を、divに実装したいです。
|
|
3
3
|
|
|
4
4
|
たとえば次のコードならば、範囲を超えた「さしすせそ」あたりも左右キーで表示させることができますよね？
|
|
@@ -7,20 +7,17 @@
|
|
|
7
7
|
|
|
8
8
|
このような機能をdivに対しても実装したいと考えております。
|
|
9
9
|
|
|
10
|
-
### 前提
|
|
11
|
-
|
|
10
|
+
尚、divの中身はtextareaの入力値をコピーしたものになります。
|
|
12
11
|
|
|
13
|
-
入力用のtextareaを隠し、表示用のdivにHTMLを加えるということです。
|
|
14
12
|
|
|
15
|
-
|
|
16
13
|
### 発生している問題
|
|
17
|
-
下記のコードで
|
|
14
|
+
下記のソースコードですが、表示用のdivの文字が長いとき、見えなくなってしまうのが問題です。
|
|
18
15
|
|
|
19
|
-
|
|
16
|
+
先のinputでいえば「さしすせそ」あたりが見えなくなってしまうということです。
|
|
20
17
|
|
|
18
|
+
これを解決し、inputのような「範囲を超えた分を左右キーで表示」をdivにも実装したいわけです。
|
|
21
19
|
|
|
22
20
|
### 該当のソースコード
|
|
23
|
-
こちらになります。入力用に隠しているtextareaでは「範囲を超えた分を左右キーで表示」ができているように思えますが、表示用のdivではそれができない。というのが問題になります。
|
|
24
21
|
```html
|
|
25
22
|
<div class="box">
|
|
26
23
|
<textarea class="dammy"></textarea>
|
1
2019.10.06.16:14 - コードのstyleタグの閉じ忘れを修正し、読みやすいよう言語ごとに分割して表示しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -21,10 +21,13 @@
|
|
|
21
21
|
|
|
22
22
|
### 該当のソースコード
|
|
23
23
|
こちらになります。入力用に隠しているtextareaでは「範囲を超えた分を左右キーで表示」ができているように思えますが、表示用のdivではそれができない。というのが問題になります。
|
|
24
|
-
|
|
25
24
|
```html
|
|
25
|
+
<div class="box">
|
|
26
|
+
<textarea class="dammy"></textarea>
|
|
27
|
+
<div class="copy"></div>
|
|
26
|
-
<
|
|
28
|
+
</div>
|
|
29
|
+
```
|
|
27
|
-
|
|
30
|
+
```css
|
|
28
31
|
.box {
|
|
29
32
|
position: relative;
|
|
30
33
|
width: 200px;
|
|
@@ -69,9 +72,8 @@
|
|
|
69
72
|
white-space: nowrap;
|
|
70
73
|
display: inline;
|
|
71
74
|
}
|
|
75
|
+
```
|
|
72
|
-
|
|
76
|
+
```jquery
|
|
73
|
-
|
|
74
|
-
<script>
|
|
75
77
|
// 入力
|
|
76
78
|
$( document ).on( 'input', '.dammy', function( e ){
|
|
77
79
|
const $dammy = $( this );
|
|
@@ -109,22 +111,9 @@
|
|
|
109
111
|
$copy.html('<div><div class="within">' +val+ '</div></div>');
|
|
110
112
|
}
|
|
111
113
|
}
|
|
112
|
-
|
|
114
|
+
```
|
|
113
115
|
|
|
114
|
-
</head>
|
|
115
116
|
|
|
116
|
-
<body>
|
|
117
|
-
|
|
118
|
-
<div class="box">
|
|
119
|
-
<textarea class="dammy"></textarea>
|
|
120
|
-
<div class="copy"></div>
|
|
121
|
-
</div>
|
|
122
|
-
|
|
123
|
-
</body>
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
```
|
|
127
|
-
|
|
128
117
|
### 試したこと
|
|
129
118
|
上は「textareaの入力値をdivにコピーする」という方法ですが、他にも「contenteditableをtrueにする」という方法を試しました。これならば「範囲を超えた分を左右キーで表示」が可能です。
|
|
130
119
|
|