bwindels/contentinputevent.html

## contentinputevent.html
<!DOCTYPE html>
<html>
	<body>
		<p>The dog <span id="edit" contenteditable="true">sleeps on</span> the sofa</p>
		<script type="text/javascript">

		var handler = {
			onBackspace: function() {
				console.log("backspace");
			},
			onDelete: function() {
				console.log("delete");
			},
			onMetaShortcut: function(actionKey) {
				console.log("meta shortcut", String.fromCharCode(actionKey));
			},
			onInput: function(text) {
				span.innerText = span.innerText + text;
				var range = document.createRange();
				range.selectNodeContents(span);
				range.collapse(false);
				var sel = window.getSelection();
				sel.removeAllRanges();
				sel.addRange(range);
				console.log("input", text);
			},
			onPaste: function(text) {
				console.log("paste", text);
			},
			onTextCompositionStart: function() {
				console.log("composition start");
			},
			onTextCompositionUpdate: function(currentValue) {
				console.log("composition update", currentValue);
			},
			onTextCompositionEnd: function() {
				console.log("composition end");
			}
		};

		var span = document.getElementById("edit");

		var metaShortcutKeys = [66, 73];

		span.addEventListener("keydown", function(event) {
			var cancel = false;
			if(event.keyCode === 8) {
				handler.onBackspace();
				cancel = true;
			}
			if(event.keyCode === 46) {
				handler.onDelete();
				cancel = true;
			}
			if(event.metaKey && metaShortcutKeys.indexOf(event.keyCode) !== -1) {
				handler.onMetaShortcut(event.keyCode);
				cancel = true;
			}
			if(cancel) {
				event.preventDefault();
				event.stopPropagation();
			}
		});
		span.addEventListener("keypress", function(event) {
			if(event.metaKey) {
				return;
			}
  			var keychar = String.fromCharCode(event.charCode);
  			handler.onInput(keychar);
			event.preventDefault();
			event.stopPropagation();
		});
		span.addEventListener("paste", function(event) {
			var text = event.clipboardData.getData("text/plain");
			if(typeof text === "string") {
				handler.onPaste(text);
			}
			event.preventDefault();
			event.stopPropagation();
		});
		span.addEventListener("compositionstart", function(event) {
			event.preventDefault();
			handler.onTextCompositionStart();

		});
		span.addEventListener("compositionupdate", function(event) {
			handler.onTextCompositionUpdate(event.data);
		});
		span.addEventListener("compositionend", function(event) {
			handler.onTextCompositionEnd();
			handler.onInput(event.data);
			event.preventDefault();
			event.stopPropagation();
		});
		span.addEventListener("input", function(event) {
			console.log("input", event);
			event.preventDefault();
			event.stopPropagation();
		});
		span.addEventListener("textInput", function(event) {
			console.log("textInput", event);
			//event.preventDefault();
			//event.stopPropagation();
		});
		// span.addEventListener("focus", function(event) {
		// 	console.log("focus!");
		// });
		// span.addEventListener("blur", function(event) {
		// 	console.log("blur!");
		// });
		document.addEventListener("selectionchange", function(event) {
			console.log("selectionchange!", window.getSelection());
		});
		document.addEventListener("selectionstart", function(event) {
			console.log("selectionstart!", window.getSelection());
		});


		</script>
	</body>
</html>

## selection.html
<!DOCTYPE html>
<html>
	<body>
		<p id="all">The dog <span id="edit" contenteditable="true">sleeps on</span> the sofa</p>
		<p><button id="select">Select</button></p>
		<script type="text/javascript">
		var button = document.getElementById('select');
		button.addEventListener('click', function() {
			var span = document.getElementById('edit');
			var spanRange = document.createRange();
			spanRange.selectNodeContents(span);
			var sel = window.getSelection();
			sel.removeAllRanges();
			sel.addRange(spanRange);
			spanRange.focus();
		}, false);

		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<p>The dog <span id="edit" contenteditable="true">sleeps on</span> the sofa</p>
	<script type="text/javascript">

	var handler = {
	onBackspace: function() {
	console.log("backspace");
	},
	onDelete: function() {
	console.log("delete");
	},
	onMetaShortcut: function(actionKey) {
	console.log("meta shortcut", String.fromCharCode(actionKey));
	},
	onInput: function(text) {
	span.innerText = span.innerText + text;
	var range = document.createRange();
	range.selectNodeContents(span);
	range.collapse(false);
	var sel = window.getSelection();
	sel.removeAllRanges();
	sel.addRange(range);
	console.log("input", text);
	},
	onPaste: function(text) {
	console.log("paste", text);
	},
	onTextCompositionStart: function() {
	console.log("composition start");
	},
	onTextCompositionUpdate: function(currentValue) {
	console.log("composition update", currentValue);
	},
	onTextCompositionEnd: function() {
	console.log("composition end");
	}
	};

	var span = document.getElementById("edit");

	var metaShortcutKeys = [66, 73];

	span.addEventListener("keydown", function(event) {
	var cancel = false;
	if(event.keyCode === 8) {
	handler.onBackspace();
	cancel = true;
	}
	if(event.keyCode === 46) {
	handler.onDelete();
	cancel = true;
	}
	if(event.metaKey && metaShortcutKeys.indexOf(event.keyCode) !== -1) {
	handler.onMetaShortcut(event.keyCode);
	cancel = true;
	}
	if(cancel) {
	event.preventDefault();
	event.stopPropagation();
	}
	});
	span.addEventListener("keypress", function(event) {
	if(event.metaKey) {
	return;
	}
	var keychar = String.fromCharCode(event.charCode);
	handler.onInput(keychar);
	event.preventDefault();
	event.stopPropagation();
	});
	span.addEventListener("paste", function(event) {
	var text = event.clipboardData.getData("text/plain");
	if(typeof text === "string") {
	handler.onPaste(text);
	}
	event.preventDefault();
	event.stopPropagation();
	});
	span.addEventListener("compositionstart", function(event) {
	event.preventDefault();
	handler.onTextCompositionStart();

	});
	span.addEventListener("compositionupdate", function(event) {
	handler.onTextCompositionUpdate(event.data);
	});
	span.addEventListener("compositionend", function(event) {
	handler.onTextCompositionEnd();
	handler.onInput(event.data);
	event.preventDefault();
	event.stopPropagation();
	});
	span.addEventListener("input", function(event) {
	console.log("input", event);
	event.preventDefault();
	event.stopPropagation();
	});
	span.addEventListener("textInput", function(event) {
	console.log("textInput", event);
	//event.preventDefault();
	//event.stopPropagation();
	});
	// span.addEventListener("focus", function(event) {
	// console.log("focus!");
	// });
	// span.addEventListener("blur", function(event) {
	// console.log("blur!");
	// });
	document.addEventListener("selectionchange", function(event) {
	console.log("selectionchange!", window.getSelection());
	});
	document.addEventListener("selectionstart", function(event) {
	console.log("selectionstart!", window.getSelection());
	});


	</script>
	</body>
	</html>