回答編集履歴

3

追記

2019/02/26 05:26

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -201,3 +201,89 @@
201
201
  <input type="button" id="btn" value="編集on/off">
202
202
 
203
203
  ```
204
+
205
+
206
+
207
+ # よりjQueryっぽく
208
+
209
+ originalEventを使えばよかったですね
210
+
211
+
212
+
213
+ ```javascript
214
+
215
+ <style>
216
+
217
+ [contenteditable]{background-Color:yellow;}
218
+
219
+ </style>
220
+
221
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
222
+
223
+ <script>
224
+
225
+ $(function(){
226
+
227
+ $('#btn').on('click',function(){
228
+
229
+ $('#d1').attr('contenteditable',$('#d1').is('[contenteditable]')?null:"true");
230
+
231
+ });
232
+
233
+ $(document).on('paste input keydown keyup keypress change','[contenteditable]',function(e){
234
+
235
+ if(e.type=="paste"){
236
+
237
+ e.preventDefault();
238
+
239
+ e.stopPropagation();
240
+
241
+ var paste = (e.originalEvent.clipboardData||window.clipboardData).getData('text');
242
+
243
+ paste = paste.replace(/[\r\n]/g, '');
244
+
245
+ const selection = window.getSelection();
246
+
247
+ while (selection.rangeCount>0){
248
+
249
+ var range=selection.getRangeAt(0);
250
+
251
+ range.deleteContents();
252
+
253
+ range.insertNode(document.createTextNode(paste));
254
+
255
+ selection.removeRange(range);
256
+
257
+ }
258
+
259
+ }else if(e.which == 13){
260
+
261
+ e.preventDefault();
262
+
263
+ }else{
264
+
265
+ var txt = $(this).text();
266
+
267
+ var reg=new RegExp("[\r\n]|<(\"[^\"]*\"|'[^']*'|[^'\">])*>","mig");
268
+
269
+ if(txt.match(reg)){
270
+
271
+ var replace2 = txt.replace(reg,'');
272
+
273
+ $(this).text(replace2);
274
+
275
+ }
276
+
277
+ }
278
+
279
+ });
280
+
281
+ });
282
+
283
+ </script>
284
+
285
+ <div id="d1">入力時に点滅する縦棒(カーソル)が常に先頭に来てしまう。</div>
286
+
287
+ <input type="button" id="btn" value="編集on/off">
288
+
289
+ ```

2

chousei

2019/02/26 05:26

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -105,3 +105,99 @@
105
105
  <div contenteditable="true">入力時に点滅する縦棒(カーソル)が常に先頭に来てしまう。</div>
106
106
 
107
107
  ```
108
+
109
+
110
+
111
+ # 調整版
112
+
113
+ ```javascript
114
+
115
+ <style>
116
+
117
+ [contenteditable]{background-Color:yellow;}
118
+
119
+ </style>
120
+
121
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
122
+
123
+ <script>
124
+
125
+ $(function(){
126
+
127
+ $('#btn').on('click',function(){
128
+
129
+ $('#d1').attr('contenteditable',$('#d1').is('[contenteditable]')?null:"true");
130
+
131
+ });
132
+
133
+ document.addEventListener('paste', function(e){
134
+
135
+ var t=e.target;
136
+
137
+ if(t.id=='d1' && t.getAttribute('contenteditable')=="true"){
138
+
139
+ e.preventDefault();
140
+
141
+ e.stopPropagation();
142
+
143
+ var paste = (e.clipboardData||window.clipboardData).getData('text');
144
+
145
+ paste = paste.replace(/[\r\n]/g, '');
146
+
147
+ const selection = window.getSelection();
148
+
149
+ while (selection.rangeCount>1){
150
+
151
+ var range=selection.getRangeAt(0);
152
+
153
+ range.deleteContents();
154
+
155
+ selection.removeRange(range);
156
+
157
+ }
158
+
159
+ if(selection.rangeCount==1){
160
+
161
+ var range=selection.getRangeAt(0);
162
+
163
+ selection.getRangeAt(0).deleteContents();
164
+
165
+ range.insertNode(document.createTextNode(paste));
166
+
167
+ }
168
+
169
+ }
170
+
171
+ });
172
+
173
+ $(document).on("input keydown keyup keypress change",'[contenteditable]',function(e){
174
+
175
+ if (e.which == 13) {
176
+
177
+ return false;
178
+
179
+ }
180
+
181
+ var txt = $(this).text();
182
+
183
+ var reg=new RegExp("[\r\n]|<(\"[^\"]*\"|'[^']*'|[^'\">])*>","mig");
184
+
185
+ if(txt.match(reg)){
186
+
187
+ var replace2 = txt.replace(reg,'');
188
+
189
+ $(this).text(replace2);
190
+
191
+ }
192
+
193
+ });
194
+
195
+ });
196
+
197
+ </script>
198
+
199
+ <div id="d1">入力時に点滅する縦棒(カーソル)が常に先頭に来てしまう。</div>
200
+
201
+ <input type="button" id="btn" value="編集on/off">
202
+
203
+ ```

1

chousei

2019/02/25 10:17

投稿

yambejp
yambejp

スコア114572

test CHANGED
@@ -45,3 +45,63 @@
45
45
 
46
46
 
47
47
  ```
48
+
49
+
50
+
51
+ # paste対応
52
+
53
+
54
+
55
+ ```javascript
56
+
57
+ <script>
58
+
59
+ $(function(){
60
+
61
+ document.querySelector('[contenteditable]').addEventListener('paste', function(e){
62
+
63
+ e.preventDefault();
64
+
65
+ e.stopPropagation();
66
+
67
+ var paste = (e.clipboardData||window.clipboardData).getData('text');
68
+
69
+ paste = paste.replace(/[\r\n]/g, '');
70
+
71
+ const selection = window.getSelection();
72
+
73
+ if (!selection.rangeCount) return false;
74
+
75
+ selection.getRangeAt(0).insertNode(document.createTextNode(paste));
76
+
77
+ });
78
+
79
+ $('[contenteditable]').on("input keydown keyup keypress change", function(e){
80
+
81
+ if (e.which == 13) {
82
+
83
+ return false;
84
+
85
+ }
86
+
87
+ var txt = $(this).text();
88
+
89
+ var reg=new RegExp("[\r\n]|<(\"[^\"]*\"|'[^']*'|[^'\">])*>","mig");
90
+
91
+ if(txt.match(reg)){
92
+
93
+ var replace2 = txt.replace(reg,'');
94
+
95
+ $(this).text(replace2);
96
+
97
+ }
98
+
99
+ });
100
+
101
+ });
102
+
103
+ </script>
104
+
105
+ <div contenteditable="true">入力時に点滅する縦棒(カーソル)が常に先頭に来てしまう。</div>
106
+
107
+ ```