JavaScriptでの個別要素の編集

ここでは、入力フィールドを使用して要素のテキストを編集する方法を学びます。簡単なものから始めて、徐々に複雑にしていきます。

それでは、同じ親要素内に配置された段落と入力フィールドがあるとします：

<div id="parent">
	<p id="elem">text</p>
	<input id="input">
</div>

入力フィールドでフォーカスが外れたときに、そのテキストが段落に表示されるようにしましょう：

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

次に、ページ読み込み時に、入力フィールドにすでに段落のテキストが表示されるようにしましょう。これにより、入力フィールドを使用して段落内のテキストを編集できるようになります。

実装します：

let elem = document.querySelector('#elem');
let input = document.querySelector('#input');

input.value = elem.textContent; // 入力フィールドに段落のテキストを書き込む

input.addEventListener('blur', function() {
	elem.textContent = this.value;
});

上記のコードを修正して、段落のテキストがフォーカス喪失時ではなく、入力フィールドへの入力中にリアルタイムで変更されるようにしてください。

入力フィールドの表示

次に、ページ上には最初入力フィールドがなく、段落をクリックしたときに表示されるようにしましょう。つまり、初期のHTMLは次のようになります：

<div id="parent">
	<p id="elem">text</p>
</div>

まず、編集機能なしで、単に入力フィールドを表示するように実装します：

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	elem.parentElement.appendChild(input);
});

では、入力フィールドでフォーカスが外れたときに段落のテキストが変更されるようにしましょう：

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
	});
	
	elem.parentElement.appendChild(input);
});

しかし、このコードは不完全です。なぜなら、段落をクリックするたびに新しい入力フィールドが作成されてしまうからです。

この問題を解決するために、フォーカス喪失時に現在の入力フィールドを削除するようにします：

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	let input = document.createElement('input');
	input.value = elem.textContent;
	
	input.addEventListener('blur', function() {
		elem.textContent = this.value;
		this.remove(); // 入力フィールドを削除
	});
	
	elem.parentElement.appendChild(input);
});

私のコードを見ずに、自分自身で説明されたタスクを解決してください。