在Windows操作系统中，用户可以通过按住Alt键同时在数字小键盘输入特定数字组合，快速输出对应的特殊字符，比如Alt+0169可以输出©符号，Alt+0174可以输出®符号。在Web开发场景中，我们可以通过JavaScript模拟这个交互逻辑，让网页用户也能使用相同的操作输入特殊字符。
实现原理分析
要模拟这个功能，核心需要处理三个关键环节：
- 监听键盘的按下和抬起事件，判断Alt键是否处于按住状态
- 记录数字小键盘输入的连续数字序列
- 当Alt键抬起时，将记录的数字序列转换为对应的字符编码，输出目标特殊字符
核心事件监听逻辑
首先需要监听keydown和keyup事件，分别处理按键按下和抬起的状态。这里需要注意，数字小键盘的按键和主键盘的数字键对应的keyCode是不同的，小键盘的数字键keyCode范围是96到105，对应数字0到9。
// 存储Alt键按下状态
let isAltPressed = false;
// 存储小键盘输入的数字序列
let numPadSequence = [];
document.addEventListener('keydown', function(e) {
// 判断Alt键是否按下
if (e.key === 'Alt' || e.keyCode === 18) {
isAltPressed = true;
// 按下Alt键时清空之前的数字序列
numPadSequence = [];
}
// 判断是否为小键盘数字键
if (isAltPressed && e.keyCode >= 96 && e.keyCode <= 105) {
// 小键盘数字键对应keyCode减去96得到实际数字
const num = e.keyCode - 96;
numPadSequence.push(num);
// 阻止默认行为，避免输入框默认输入数字
e.preventDefault();
}
});
document.addEventListener('keyup', function(e) {
if (e.key === 'Alt' || e.keyCode === 18) {
isAltPressed = false;
// Alt键抬起时处理数字序列
if (numPadSequence.length > 0) {
const numStr = numPadSequence.join('');
const charCode = parseInt(numStr, 10);
// 将编码转换为字符
const specialChar = String.fromCharCode(charCode);
// 这里可以将字符插入到当前聚焦的输入框中
insertCharToFocusedInput(specialChar);
// 清空序列
numPadSequence = [];
}
}
});
插入字符到输入框的逻辑
当获取到特殊字符后，需要将其插入到当前用户聚焦的输入框中，这里需要处理输入框的光标位置，保证字符插入到光标所在处，而不是覆盖原有内容。
function insertCharToFocusedInput(char) {
const activeElement = document.activeElement;
// 判断当前聚焦元素是否为输入框或可编辑元素
if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable)) {
// 处理input和textarea元素
if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
const start = activeElement.selectionStart;
const end = activeElement.selectionEnd;
const value = activeElement.value;
// 插入字符到光标位置
activeElement.value = value.substring(0, start) + char + value.substring(end);
// 更新光标位置到插入字符之后
activeElement.selectionStart = activeElement.selectionEnd = start + 1;
} else if (activeElement.isContentEditable) {
// 处理可编辑的div等元素
document.execCommand('insertText', false, char);
}
}
}
兼容性注意事项
在实际使用中需要注意几个兼容性问题：
- 部分浏览器对Alt键的事件处理存在差异，建议在判断Alt键时同时检查
e.key和e.keyCode - Mac系统没有数字小键盘的Alt输入逻辑，该功能仅适配Windows系统用户，可添加系统判断做兼容处理
- 如果用户输入的数字序列无法转换为有效字符编码，比如输入的数字超过字符编码范围，需要做异常兜底，避免输出乱码
完整示例测试
可以将上述代码整合到页面中，在页面中添加一个输入框，测试按住Alt键再按小键盘数字键的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>模拟Alt+数字键盘功能</title>
</head>
<body>
<input type="text" placeholder="按住Alt键再按小键盘数字测试" style="width: 300px; padding: 8px;">
<script>
let isAltPressed = false;
let numPadSequence = [];
document.addEventListener('keydown', function(e) {
if (e.key === 'Alt' || e.keyCode === 18) {
isAltPressed = true;
numPadSequence = [];
}
if (isAltPressed && e.keyCode >= 96 && e.keyCode <= 105) {
const num = e.keyCode - 96;
numPadSequence.push(num);
e.preventDefault();
}
});
document.addEventListener('keyup', function(e) {
if (e.key === 'Alt' || e.keyCode === 18) {
isAltPressed = false;
if (numPadSequence.length > 0) {
const numStr = numPadSequence.join('');
const charCode = parseInt(numStr, 10);
const specialChar = String.fromCharCode(charCode);
insertCharToFocusedInput(specialChar);
numPadSequence = [];
}
}
});
function insertCharToFocusedInput(char) {
const activeElement = document.activeElement;
if (activeElement && (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable)) {
if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') {
const start = activeElement.selectionStart;
const end = activeElement.selectionEnd;
const value = activeElement.value;
activeElement.value = value.substring(0, start) + char + value.substring(end);
activeElement.selectionStart = activeElement.selectionEnd = start + 1;
} else if (activeElement.isContentEditable) {
document.execCommand('insertText', false, char);
}
}
}
</script>
</body>
</html>
测试时可以在输入框聚焦的状态下，按住Alt键，依次按小键盘的0、1、6、9，松开Alt键后输入框中应该会出现©符号，和Windows系统原生的Alt+0169效果一致。
JavaScript键盘事件Alt_数字键盘特殊字符输入修改时间：2026-06-17 08:48:32