回答編集履歴
1
ソースをひとまとめにして追記
answer
CHANGED
|
@@ -99,4 +99,129 @@
|
|
|
99
99
|
// }
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### 追記
|
|
105
|
+
|
|
106
|
+
次のような一つのhtmlファイルの状態にして、ファイルをダブルクリックしたところ、動作しました
|
|
107
|
+
|
|
108
|
+
残念なところとしては、隠れた部分を表示したとき、カーソルの位置と文字の位置が合っていないところです。
|
|
109
|
+
あくまで、できたのは「表示するだけ」になってしまっております....
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<!DOCTYPE html>
|
|
113
|
+
<html lang="ja">
|
|
114
|
+
|
|
115
|
+
<head>
|
|
116
|
+
<title>Team1 Website</title>
|
|
117
|
+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
118
|
+
|
|
119
|
+
<style>
|
|
120
|
+
.box {
|
|
121
|
+
position: relative;
|
|
122
|
+
width: 200px;
|
|
123
|
+
height: 40px;
|
|
124
|
+
margin: 0;
|
|
125
|
+
}
|
|
126
|
+
.dammy,
|
|
127
|
+
.copy {
|
|
128
|
+
border: none;
|
|
129
|
+
padding: 0.75rem 1rem;
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: 40px;
|
|
132
|
+
line-height: 1.5;
|
|
133
|
+
min-height: 40px;
|
|
134
|
+
font-size: 1.5rem;
|
|
135
|
+
font-family: sans-serif;
|
|
136
|
+
white-space: nowrap;
|
|
137
|
+
overflow: hidden;
|
|
138
|
+
}
|
|
139
|
+
.dammy {
|
|
140
|
+
position: absolute;
|
|
141
|
+
z-index: 1;
|
|
142
|
+
caret-color: blue;
|
|
143
|
+
border: none;
|
|
144
|
+
background: transparent;
|
|
145
|
+
color: transparent;
|
|
146
|
+
resize: none;
|
|
147
|
+
}
|
|
148
|
+
.copy {
|
|
149
|
+
height: auto;
|
|
150
|
+
position: relative;
|
|
151
|
+
z-index: 0;
|
|
152
|
+
background: #ddd;
|
|
153
|
+
}
|
|
154
|
+
.copy .within {
|
|
155
|
+
color: blue;
|
|
156
|
+
white-space: nowrap;
|
|
157
|
+
display: inline;
|
|
158
|
+
}
|
|
159
|
+
.copy .overed {
|
|
160
|
+
color: red;
|
|
161
|
+
white-space: nowrap;
|
|
162
|
+
display: inline;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* style-sheet 追加 */
|
|
166
|
+
.right-aligned {
|
|
167
|
+
position: sticky;
|
|
168
|
+
right: 0;
|
|
169
|
+
}
|
|
170
|
+
</style>
|
|
171
|
+
|
|
172
|
+
<script>
|
|
173
|
+
// 入力
|
|
174
|
+
$( document ).on( 'input', '.dammy', function( e ){
|
|
175
|
+
const $dammy = $( this );
|
|
176
|
+
// 改行禁止
|
|
177
|
+
enter( $dammy, e );
|
|
178
|
+
// コピー
|
|
179
|
+
const lim = 5;
|
|
180
|
+
copy( $dammy, lim );
|
|
181
|
+
});
|
|
182
|
+
|
|
183
|
+
function enter( $dammy, e ){
|
|
184
|
+
$dammy.on( 'keydown', function( e ) {
|
|
185
|
+
// 改行禁止
|
|
186
|
+
if ( e.which == 13 ) {
|
|
187
|
+
return false;
|
|
188
|
+
// 横矢印キー押下時の動作
|
|
189
|
+
} else if ( e.which == 39 ) {
|
|
190
|
+
$('.within').addClass('right-aligned');
|
|
191
|
+
} else if ( e.which == 37 ) {
|
|
192
|
+
$('.within').removeClass('right-aligned');
|
|
193
|
+
}
|
|
194
|
+
});
|
|
195
|
+
const val = $dammy.val();
|
|
196
|
+
const reg = new RegExp( "[\r\n]", "g" );
|
|
197
|
+
if ( val.match(reg) ) {
|
|
198
|
+
const replace = val.replace( reg, '' );
|
|
199
|
+
$dammy.val( replace );
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
// コピー
|
|
204
|
+
function copy( $dammy, lim ){
|
|
205
|
+
const $copy = $dammy.next( '.copy' );
|
|
206
|
+
const val = $dammy.val();
|
|
207
|
+
// if ( val.length > lim ) {
|
|
208
|
+
const within = val //.substr( 0, lim );
|
|
209
|
+
// const overed = val.slice( lim );
|
|
210
|
+
$copy.html('<div class="within">' +within+ '</div>');
|
|
211
|
+
// $copy.append('<div class="overed">' +overed+ '</div>');
|
|
212
|
+
// } else {
|
|
213
|
+
// $copy.html('<div><div class="within">' +val+ '</div></div>');
|
|
214
|
+
// }
|
|
215
|
+
}
|
|
216
|
+
</script>
|
|
217
|
+
</head>
|
|
218
|
+
|
|
219
|
+
<body>
|
|
220
|
+
<div class="box">
|
|
221
|
+
<textarea class="dammy"></textarea>
|
|
222
|
+
<div class="copy"></div>
|
|
223
|
+
</div>
|
|
224
|
+
</body>
|
|
225
|
+
|
|
226
|
+
</html>
|
|
102
227
|
```
|