なんでもかんでもreplaceしていれば書き換えが発生するので
カーソルの位置はずれます
replaceの発動条件をいれればいいでしょう
javascript
1<script>
2$(function(){
3 $('[contenteditable]').on("input keydown keyup keypress change", function(e){
4 if (e.which == 13) {
5 return false;
6 }
7 var txt = $(this).text();
8 var reg=new RegExp("<(\"[^\"]*\"|'[^']*'|[^'\">])*>","g");
9 if(txt.match(reg)){
10 var replace2 = txt.replace(reg,'');
11 $(this).text(replace2);
12 }
13})
14
15});
16</script>
17<div contenteditable="true">入力時に点滅する縦棒(カーソル)が常に先頭に来てしまう。</div>
18
paste対応
javascript
1<script>
2$(function(){
3 document.querySelector('[contenteditable]').addEventListener('paste', function(e){
4 e.preventDefault();
5 e.stopPropagation();
6 var paste = (e.clipboardData||window.clipboardData).getData('text');
7 paste = paste.replace(/[\r\n]/g, '');
8 const selection = window.getSelection();
9 if (!selection.rangeCount) return false;
10 selection.getRangeAt(0).insertNode(document.createTextNode(paste));
11 });
12 $('[contenteditable]').on("input keydown keyup keypress change", function(e){
13 if (e.which == 13) {
14 return false;
15 }
16 var txt = $(this).text();
17 var reg=new RegExp("[\r\n]|<(\"[^\"]*\"|'[^']*'|[^'\">])*>","mig");
18 if(txt.match(reg)){
19 var replace2 = txt.replace(reg,'');
20 $(this).text(replace2);
21 }
22 });
23});
24</script>
25<div contenteditable="true">入力時に点滅する縦棒(カーソル)が常に先頭に来てしまう。</div>
調整版
javascript
1<style>
2[contenteditable]{background-Color:yellow;}
3</style>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5<script>
6$(function(){
7 $('#btn').on('click',function(){
8 $('#d1').attr('contenteditable',$('#d1').is('[contenteditable]')?null:"true");
9 });
10 document.addEventListener('paste', function(e){
11 var t=e.target;
12 if(t.id=='d1' && t.getAttribute('contenteditable')=="true"){
13 e.preventDefault();
14 e.stopPropagation();
15 var paste = (e.clipboardData||window.clipboardData).getData('text');
16 paste = paste.replace(/[\r\n]/g, '');
17 const selection = window.getSelection();
18 while (selection.rangeCount>1){
19 var range=selection.getRangeAt(0);
20 range.deleteContents();
21 selection.removeRange(range);
22 }
23 if(selection.rangeCount==1){
24 var range=selection.getRangeAt(0);
25 selection.getRangeAt(0).deleteContents();
26 range.insertNode(document.createTextNode(paste));
27 }
28 }
29 });
30 $(document).on("input keydown keyup keypress change",'[contenteditable]',function(e){
31 if (e.which == 13) {
32 return false;
33 }
34 var txt = $(this).text();
35 var reg=new RegExp("[\r\n]|<(\"[^\"]*\"|'[^']*'|[^'\">])*>","mig");
36 if(txt.match(reg)){
37 var replace2 = txt.replace(reg,'');
38 $(this).text(replace2);
39 }
40 });
41});
42</script>
43<div id="d1">入力時に点滅する縦棒(カーソル)が常に先頭に来てしまう。</div>
44<input type="button" id="btn" value="編集on/off">
よりjQueryっぽく
originalEventを使えばよかったですね
javascript
1<style>
2[contenteditable]{background-Color:yellow;}
3</style>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5<script>
6$(function(){
7 $('#btn').on('click',function(){
8 $('#d1').attr('contenteditable',$('#d1').is('[contenteditable]')?null:"true");
9 });
10 $(document).on('paste input keydown keyup keypress change','[contenteditable]',function(e){
11 if(e.type=="paste"){
12 e.preventDefault();
13 e.stopPropagation();
14 var paste = (e.originalEvent.clipboardData||window.clipboardData).getData('text');
15 paste = paste.replace(/[\r\n]/g, '');
16 const selection = window.getSelection();
17 while (selection.rangeCount>0){
18 var range=selection.getRangeAt(0);
19 range.deleteContents();
20 range.insertNode(document.createTextNode(paste));
21 selection.removeRange(range);
22 }
23 }else if(e.which == 13){
24 e.preventDefault();
25 }else{
26 var txt = $(this).text();
27 var reg=new RegExp("[\r\n]|<(\"[^\"]*\"|'[^']*'|[^'\">])*>","mig");
28 if(txt.match(reg)){
29 var replace2 = txt.replace(reg,'');
30 $(this).text(replace2);
31 }
32 }
33 });
34});
35</script>
36<div id="d1">入力時に点滅する縦棒(カーソル)が常に先頭に来てしまう。</div>
37<input type="button" id="btn" value="編集on/off">
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/25 03:28 編集
2019/02/25 06:03 編集
2019/02/25 09:05
2019/02/25 10:05 編集
2019/02/25 10:19
2019/02/25 10:56
2019/02/26 05:30
2019/02/27 15:10