html
<input type="text" id="myInput">
js
const input = document.getElementById('myInput');
// 添加默认右键菜单
input.addEventListener('contextmenu', (event) => {
event.preventDefault(); // 阻止默认菜单显示
alert('默认右键菜单');
});
// 添加自定义右键菜单
document.addEventListener('contextmenu', (event) => {
if (!input.contains(event.target)) {
event.preventDefault(); // 阻止默认菜单显示
const menu = document.createElement('div');
menu.innerHTML = '自定义右键菜单';
menu.style.position = 'absolute';
menu.style.top = `${event.clientY}px`;
menu.style.left = `${event.clientX}px`;
document.body.appendChild(menu);
// 点击任意位置关闭菜单
document.addEventListener('click', () => {
menu.remove();
}, { once: true });
}
});
// 监听输入框聚焦事件
input.addEventListener('focus', () => {
// 移除默认右键菜单
input.removeEventListener('contextmenu', (event) => {
event.preventDefault();
alert('默认右键菜单');
});
});
// 监听输入框失焦事件
input.addEventListener('blur', () => {
// 添加默认右键菜单
input.addEventListener('contextmenu', (event) => {
event.preventDefault();
alert('默认右键菜单');
});
});