makotom/change-dnd.html

## change-dnd.html
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Change events on text box</title>

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const input = document.querySelector('input#dnd-textbox');
        const output = document.querySelector('div#dnd-output');

        input.addEventListener('input', () => {
            // Forcibly focus on the text box and then blur the focus
            // to imitate user commitment.
            input.focus();
            input.blur();
        });

        input.addEventListener('change', () => {
            // Output its value to a newly-created p element
            const p = document.createElement('p');

            p.appendChild(document.createTextNode(`The content of the text box is: ${input.value}`));
            output.appendChild(p);
        });

        // Extra for courtesy: Select the reference text upon load
        {
            const selection = window.getSelection();

            selection.removeAllRanges();
            selection.selectAllChildren(document.querySelector('p#dnd-desc'));
        }
    });
</script>

<div id="sandbox-dnd">
    <p id="dnd-desc">
        With changes on the text box below, a <code>change</code> event fires, and its content appears under the text box.<br>
        Then, <strong>what would happen if a user drags and drops this text into the text box?</strong>
    </p>
    <input id="dnd-textbox">
    <div id="dnd-output"></div>
</div>
	<!doctype html>
	<html lang="en">
	<meta charset="UTF-8">
	<title>Change events on text box</title>

	<script>
	window.addEventListener('DOMContentLoaded', () => {
	const input = document.querySelector('input#dnd-textbox');
	const output = document.querySelector('div#dnd-output');

	input.addEventListener('input', () => {
	// Forcibly focus on the text box and then blur the focus
	// to imitate user commitment.
	input.focus();
	input.blur();
	});

	input.addEventListener('change', () => {
	// Output its value to a newly-created p element
	const p = document.createElement('p');

	p.appendChild(document.createTextNode(`The content of the text box is: ${input.value}`));
	output.appendChild(p);
	});

	// Extra for courtesy: Select the reference text upon load
	{
	const selection = window.getSelection();

	selection.removeAllRanges();
	selection.selectAllChildren(document.querySelector('p#dnd-desc'));
	}
	});
	</script>

	<div id="sandbox-dnd">
	<p id="dnd-desc">
	With changes on the text box below, a <code>change</code> event fires, and its content appears under the text box.<br>
	Then, <strong>what would happen if a user drags and drops this text into the text box?</strong>
	</p>
	<input id="dnd-textbox">
	<div id="dnd-output"></div>
	</div>