Safari浏览器中Ctrl+V无法直接粘贴至手机号输入框问题

问题根源 #

你的代码在处理Ctrl/Cmd+V快捷键时未阻止浏览器默认行为，Safari会触发自带的粘贴提示弹窗，打断自定义粘贴逻辑；同时document.execCommand属于已废弃API，在Safari中兼容性较差。

修复方案 #

1. 按下Ctrl/Cmd+V时强制阻止默认事件，消除Safari的粘贴提示
2. 用现代Clipboard API替代废弃的document.execCommand
3. 新增paste事件监听，覆盖右键粘贴等非键盘触发的粘贴场景
4. 简化手机号格式化逻辑，确保格式统一

修改后的代码 #

JavaScript

$('#phone_mobile, #phone_home').on({
    keydown: function(event) {
        if (event.ctrlKey || event.metaKey) {
            switch (event.key) {
                case 'a':
                    $(this).select();
                    event.preventDefault();
                    break;
                case 'c':
                    event.preventDefault();
                    navigator.clipboard.writeText($(this).val()).catch(err => {
                        console.error('复制失败:', err);
                    });
                    break;
                case 'x':
                    event.preventDefault();
                    navigator.clipboard.writeText($(this).val()).then(() => {
                        $(this).val('');
                    }).catch(err => {
                        console.error('剪切失败:', err);
                    });
                    break;
                case 'v':
                    event.preventDefault(); // 核心：阻止Safari默认粘贴弹窗
                    const inputField = this;
                    navigator.clipboard.readText().then(pastedText => {
                        // 清理粘贴内容并格式化
                        const cleanText = pastedText.replace(/[\(\)\s-]/g, '');
                        const formattedText = cleanText.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
                        $(inputField).val(formattedText);
                    }).catch(err => {
                        console.error('读取剪贴板失败:', err);
                    });
                    break;
            }
        }
    },
    paste: function(event) {
        event.preventDefault(); // 阻止默认粘贴行为
        const inputField = this;
        const pastedText = event.originalEvent.clipboardData.getData('text');
        const cleanText = pastedText.replace(/[\(\)\s-]/g, '');
        const formattedText = cleanText.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
        $(inputField).val(formattedText);
    }
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
Cell: <input type="text" id="phone_mobile" value="" /><br/>
Home ph: <input type="text" id="phone_home" value="" />

关键改动说明 #

• 为所有快捷键操作添加event.preventDefault()，彻底阻止浏览器默认行为，解决Safari粘贴弹窗问题
• 用navigator.clipboard系列API替代废弃的document.execCommand，适配现代浏览器标准
• 新增paste事件监听，覆盖所有粘贴触发场景（键盘、右键、菜单栏）
• 简化格式化流程：先清理所有非数字字符，再统一转换为(XXX) XXX-XXXX格式

内容的提问来源于stack exchange，提问作者Abdullah Shahab