Q&A
しつこいようですが、何のためにinputが必要なのでしょうか？サブミットしないなら不要ですよね？
実現したいこと
vscode,xamppにて
tdをダブルクリックしたらinputタグにして編集できるようにしましたが、enterキーを押すとエラーになります。
動作自体は問題ありません。
エラーの解決方法が分かりません。どなたか教えてください。
発生している問題・エラーメッセージ
input.js:77 Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <title>Document</title> </head> <body> <table border="1" style="border-collapse: collapse" id="tb1" > <tbody><tr> <th>インクリメントID</th> <th>ID</th> <th>名前</th> <th>性別</th> <th>スコア</th> <th>日</th> <th>スコア２</th> </tr> <!-- テーブル表示 --> <tr> <td>1</td> <td>1</td> <td> 仁</td> <td>0</td> <td> 100点</td> <td>2023-12-07</td> <td>365</td> </tr> <tr> <td>2</td> <td>2</td> <td> 銀</td> <td>0</td> <td> 50点</td> <td>2023-02-01</td> <td>50</td> </tr> <tr> <td>3</td> <td>3</td> <td> 灯</td> <td>0</td> <td> 70点</td> <td>2022-10-13</td> <td>100</td> </tr> <tr> <td>4</td> <td>4</td> <td> 凪</td> <td>0</td> <td> 90点</td> <td>2024-02-01</td> <td>0</td> </tr> <tr> <td>5</td> <td>1</td> <td> 仁</td> <td>0</td> <td> 100点</td> <td>2023-09-10</td> <td>200</td> </tr> </tbody></table> <!-- <script src="remind.js"></script> --> <script src="input.js"></script> </body> </html>
input.js
1$(function() { 2 3 $("tr td:nth-child(1)").addClass("Increments"); 4 // $("tr td:last-child").after('<td><form method="post" action="form.php"><button class="save" value="1" type=submit>保存</button></form></td>'); 5 6 $('td').each(function(i){ 7 8 var text=$(this).text(); 9 $(this).attr('name',text); 10 11 }); 12 13 14 $('.save').each(function(i){ 15 $(this).attr('name',(i+1)); 16 $(this).attr('value',(i+1)); 17 }); 18 19}); 20 21 22window.onload = function() { 23 document.addEventListener("dblclick", function(event) { 24 if (!event.target.closest('td')) 25 return; 26 27 if(event.target.classList.contains('Increments')) 28 return; 29 30 var td = event.target.closest('td'); 31 var parent = td.parentNode; 32 33 var input = document.createElement("input"); 34 35 input.setAttribute("type", "text"); 36 input.value = td.innerText; 37 38 // エンターキーが押されるかフォーカスが外れるかするとtd要素に戻すようにしておく 39 // エンターキーが押された場合 40 input.addEventListener("keydown", function(e) { 41 if(e.keyCode === 13) { 42 td.innerText = this.value; 43 parent.replaceChild(td, this); 44 45 } 46 }); 47 48 // フォーカスが外れた場合 49 input.addEventListener("blur", function() { 50 td.innerText = this.value; 51 parent.replaceChild(td, this); 52 53 }); 54 55 parent.replaceChild(input, td); 56 57 input.focus(); 58 }); 59 }; 60 61 62 63 64
試したこと
ここに問題に対して試したことを記載してください。
教えて頂いたcontenteditable属性でも編集は可能なのですが、自分の学習のためにエラー解決法を知りたく質問致しました。
問題が再現しませんでした。問題の再現手順を具体的に教えてください。
なんか難しく考えすぎでしょう
dblclick,keydown,blurを処理するだけです、シンプルに考えてください
回答2件
0
変なことしなくてもこれで十分な気がしますが・・
javascript
1document.addEventListener('dblclick',({target})=>{ 2 if(target.matches('#tb1 td')){ 3 target.contentEditable=true; 4 target.focus(); 5 } 6}); 7document.addEventListener('keydown',e=>{ 8 if(e.key=="Enter"){ 9 e.target.blur(); 10 } 11}); 12document.addEventListener('blur',({target})=>{ 13 if(target instanceof HTMLElement && target.matches('[contentEditable]')){ 14 target.removeAttribute('contentEditable'); 15 } 16},true);
投稿2024/02/02 04:36
総合スコア117867
0
ベストアンサー
js
1parent.replaceChild(td, this);
Enterキーを押すとこれが実行されるわけですが、replaceChidl() の中では、まず第2引数のノードがドキュメントツリーから切り離されます。そのときにそのノードがフォーカスされていた場合はフォーカスを解除するため、blur イベントが発生します。質問文のコードでは blur イベントリスナで同じく replaceChild(td, this) が実行され、ノードの入れ替えが成立します。最初の replaceChild() の処理に戻ると第2引数のノードは既にドキュメントから切り離されているので例外になるわけです。
簡単に直すには、Enterキーの処理を parent.replaceChild(td, this) から this.blur() にしてしまえばよいでしょう。
投稿2024/02/02 04:20
総合スコア21929
あなたの回答
tips
プレビュー
