理解 onkeypress 事件的触发时机及其与 onkeydown、onkeyup 的区别
掌握在 HTML 和 JavaScript 中绑定 onkeypress 事件的三种方式
能够使用 addEventListener 实现基于字符输入的交互逻辑
了解该事件的适用范围、局限性及现代替代方案
onkeypress 是 HTML DOM 中的一个键盘事件，当用户按下并释放一个会产生字符值的键（如字母、数字、符号）时触发。
重要提示：
onkeypress不会在按下功能键（如Enter、Shift、Ctrl、Arrow Keys、F1-F12等）时触发，因为它只响应能生成字符的按键。
键盘事件触发顺序
当用户按下一个可打印字符键（例如字母 "A"）时，三个键盘事件按以下顺序触发：
onkeydown —— 按键刚被按下
onkeypress —— 按键产生字符（仅限可打印字符）
onkeyup —— 按键被释放
onkeypress 可用于所有可聚焦的 HTML 元素，但以下元素不支持（因其不可交互或不可聚焦）：
<base>
<bdo>
<br>
<head>
<html>
<iframe>
<meta>
<param>
<script>
<style>
<title>
常见可用元素：
<input>、<textarea>、<div tabindex="0">、<button>等。
<element onkeypress="myHandler()">element.onkeypress = function(event) {
myHandler(event);
};addEventListener()element.addEventListener("keypress", myHandler);监听字符输入
以下代码在用户于输入框中输入任意可打印字符时，将背景色变为黄色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM onkeypress 事件</title>
</head>
<body>
<h1 style="color: green;">
编程学习网
</h1>
<p>请在下方输入框中输入任意字符（如字母或数字）</p>
<input type="text" id="inputField" style="background-color: green; padding: 8px;">
<script>
document.getElementById("inputField").addEventListener("keypress", handleKeypress);
function handleKeypress() {
document.getElementById("inputField").style.backgroundColor = "yellow";
}
</script>
</body>
</html>注意事项
按下 Enter、方向键、Tab 等不会触发此事件
若需监听所有按键（包括功能键），应使用 keydown 或 keyup
根据 MDN Web Docs，keypress 事件已被正式废弃，不再推荐在新项目中使用。
使用 keydown + event.key 判断是否为可打印字符：
element.addEventListener("keydown", (event) => {
// 检查是否为可打印字符（非功能键）
if (event.key.length === 1) {
console.log("输入了字符:", event.key);
// 执行原 onkeypress 逻辑
}
});或者使用 input 事件监听实际输入内容变化（更符合语义）：
element.addEventListener("input", (event) => {
console.log("当前值:", event.target.value);
});
input事件在用户输入、粘贴、删除等任何改变输入框内容的操作时都会触发，是处理文本输入的首选。
onkeypress 仅在按下可生成字符的键时触发（如 a-z, 0-9, !@# 等）
功能键（Enter、方向键、Ctrl 等）不会触发 onkeypress
事件触发顺序：onkeydown → onkeypress → onkeyup
该事件已被废弃，现代开发应使用 keydown 或 input 事件替代
绑定方式与 onkeydown 相同，但语义和用途不同
为什么 onkeypress 不会在按下 Backspace 或 Delete 键时触发？这会导致什么问题？
如果要实现实时限制用户只能输入数字，使用 onkeypress、keydown 和 input 三种方式各有什么优缺点？
如何用 keydown 事件模拟 onkeypress 的行为（即只响应可打印字符）？请写出代码示例。