js 实现剪切
使用 document.execCommand 方法实现剪切
document.execCommand 是传统的剪贴板操作方法,兼容性较好但已逐渐被现代 API 替代。
function cutTextUsingExecCommand(elementId) {
const element = document.getElementById(elementId);
element.select();
document.execCommand('cut');
}
该方法会剪切选中文本或输入框内容到剪贴板。
使用现代 Clipboard API 实现剪切
Clipboard API 提供了更现代的剪贴板操作方式,需用户授权。
async function cutTextUsingClipboardAPI(elementId) {
const element = document.getElementById(elementId);
const text = element.value || element.textContent;
try {
await navigator.clipboard.writeText(text);
element.value = ''; // 清空输入框或元素内容
} catch (err) {
console.error('剪切失败:', err);
}
}
需注意浏览器权限问题,通常在安全上下文(如 HTTPS)中可用。
实现自定义 UI 的剪切操作
若需自定义剪切按钮或交互逻辑,可结合事件监听:

document.getElementById('cutButton').addEventListener('click', () => {
const input = document.getElementById('textInput');
input.select();
document.execCommand('cut'); // 或使用 Clipboard API
});
注意事项
execCommand已废弃,但在部分旧浏览器中仍可使用。- Clipboard API 需要用户主动触发(如点击事件),否则会报权限错误。
- 移动端兼容性需额外测试,部分 API 可能受限。






