JavaScript键盘事件详解：keydown、keypress、input与Composition事件

<script type="text/javascript">
	document.addEventListener("keydown", function(event) {
		// 判断按下的键是否是回车键（键码为13）
		if(event.keyCode === 13) {
			// 执行相应的操作，例如提交表单或执行搜索功能
			console.log("Enter key pressed!");
			// 在这里可以添加具体的逻辑代码
		}
	});
</script>

<script type="text/javascript">
	// 监听键盘的keyup事件
	document.addEventListener("keyup", function(event) {
		// 判断释放的键是否是回车键（键码为13）
		if(event.keyCode === 13) {
			// 执行相应的操作，例如提交表单或执行搜索功能
			console.log("Enter key released!");
			// 在这里可以添加具体的逻辑代码
		}
	});
</script>

<script type="text/javascript">
	// 监听键盘的keypress事件
	document.addEventListener("keypress", function(event) {
		// 获取按下的键对应的字符
		var char = String.fromCharCode(event.which);

		// 显示用户的输入内容
		var userInput = document.getElementById("user-input");
		userInput.textContent += char;
	});
</script>

<body>
	<input type="text" id="input-field">
	<div id="char-count"></div>
</body>
<script>
	var inputField = document.getElementById("input-field");
	var charCount = document.getElementById("char-count");

	inputField.addEventListener("input", function(event) {
		var inputValue = event.target.value;
		var count = inputValue.length;
		charCount.textContent = "字符数量：" + count;
	});
</script>

<body>
	<input type="text" id="input-field">
</body>
<script>
	var inputField = document.getElementById("input-field");

	inputField.addEventListener("compositionstart", function(event) {
		console.log("输入法开始输入字符");
	});
</script>

<body>
	<input type="text" id="input-field">
</body>

<script>
	var inputField = document.getElementById("input-field");

	inputField.addEventListener("compositionupdate", function(event) {
		var inputText = event.data;
		console.log("正在输入字符: " + inputText);
	});
</script>

<body>
	<input type="text" id="input-field">
</body>

<script>
	var inputField = document.getElementById("input-field");

	inputField.addEventListener("compositionend", function(event) {
		var inputText = event.data;
		console.log("输入完成的字符: " + inputText);
	});
</script>