如何识别剪贴板事件中的组合键，实现差异化粘贴文本？

我有一个textarea，用户可从中粘贴剪贴板文本。通过clipboarddata.getData('text')获取的粘贴文本会被修改，但需要实现切换逻辑：当用户按下CTRL+SHIFT+V而非CTRL+V时，粘贴的文本不被修改。

最初尝试通过keydown/keyup事件捕获shift键状态：

$('textarea').on('keyup', function(e) 
{
    shiftkey_down = e.shiftKey;
});

然后在paste事件中读取该变量：

$('textarea').on('paste', function(e) 
{
    if (shiftkey_down)
    {
        // ...
    }
});

但paste事件在keydown和keyup之后触发，导致shiftkey_down在paste处理程序中始终为false，无法正确读取按键状态。

更新1：尝试短延迟方案 #

使用短延迟避免keydown的布尔变量被立即覆盖：

var shiftkey_paste = false;

$('textarea').on('keydown', function(e) 
{
    if (!shiftkey_paste)
    {
        shiftkey_paste = e.shiftKey && e.ctrlKey;

        console.log('> '+shiftkey_paste);

        setTimeout( function() 
        {
            // set false again after timeout so paste event has chance to pick up a true value
            shiftkey_paste = false;
        }, 10);
    }
    
    console.log('>> ' + shiftkey_paste);
});

在paste处理程序中打印该值：console.log('>>> ' + shiftkey_paste);

结果：

> false
>> false
> true
>> true
> false
>> false
>>> false

即便使用延迟，结果仍为false。

更新2：调整延迟时长解决问题 #

✔️ 改用100ms延迟而非10ms后，问题解决！

更新3：修复重复触发定时器的问题 #

发现当用户按住CTRL和SHIFT时，setTimeout会多次触发，导致布尔值被提前设为false。解决方案是每次触发keydown时清除之前的定时器：

var shiftkey_paste = false;
var shiftkey_timeout = null;

$('textarea').on('keydown', function(e) 
{
    if (!shiftkey_paste)
    {
        clearTimeout(shiftkey_timeout);
        
        shiftkey_paste = e.shiftKey && e.ctrlKey;

        console.log('> ' + shiftkey_paste);

        shiftkey_timeout = setTimeout( function() 
        {
            // set false again after timeout so paste event has chance to pick up a true value
            shiftkey_paste = false;
            
            shiftkey_timeout = null;
            
        }, 
        500); // 500 ms for timeout to set back boolean to false
    }
    
    console.log('>> ' + shiftkey_paste);
});

该方案运行效果良好。

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