Question

我正在使用事件监听器获取密钥是jquery。

我的问题是它只会在我放开之前按下的每个键时触发。

例如：我经常使用cmd + left来选择我的文本，我仍然按住cmd来复制它。但文本只被选中，当我放开命令（所有键）时。

$('.komand-line').focus(function(){
    var caret='<div class="komand-caret-wrapper"><div class="komand-caret"></div></div>';
    $('.komand-fake').html(caret+$(this).val());
    $(this).on('keydown keyup mousedown mouseup mousemove',function(){
        $('.komand-fake').html($(this).val());
        startpos = $(this)[0].selectionStart;
        endpos = $(this)[0].selectionEnd;
        $('#komand .komand-caret').remove();
        if(endpos > startpos){
                var output = [$('.komand-fake').html().slice(0, startpos),'<div class="komand-selected">',$('.komand-fake').html().slice(startpos,endpos),'</div>',$('.komand-fake').html().slice(endpos)].join('');
        }else{
            var output = [$('.komand-fake').html().slice(0, startpos), caret, $('.komand-fake').html().slice(startpos)].join('');
        }
        $('.komand-fake').html(output);
    });
});

这是我目前用于调用侦听器的代码。我想完成所有事情＆＃34;而＃34;键被按下了。您可以在http://server.hvlmnns.de/

上测试当前行为

任何想法如何防止这种情况？我想我会需要像按键一样的东西，但是按键方法是不会的也可以正常工作。

Answer 1

围绕处理程序中的函数包装超时工作非常完美。

function komandCaret(el,caret){
    var komandCaretInterval = setInterval(function () {
         $('.komand-fake').html(el.val());
        startpos = el[0].selectionStart;
        endpos = el[0].selectionEnd;
        $('#komand .komand-caret').remove();
        if(endpos > startpos){
                var output = [$('.komand-fake').html().slice(0, startpos),'<div class="komand-selected">',$('.komand-fake').html().slice(startpos,endpos),'</div>',$('.komand-fake').html().slice(endpos)].join('');
        }else{
            var output = [$('.komand-fake').html().slice(0, startpos), caret, $('.komand-fake').html().slice(startpos)].join('');
        }
        $('.komand-fake').html(output);
    },10);
}

$(document).ready(function(){
    $('.komand-fake').html($('.komand-line').val());
    $('.komand-fake').on('keydown mousedown keyup mouseup',function(e){
        $('.komand-line').focus();    
    });
    $('.komand-line').focus(function(){
        var caret='<div class="komand-caret-wrapper"><div class="komand-caret"></div></div>';
        $('.komand-fake').html(caret+$(this).val());
        $(this).on('keydown mousedown ',function(e){
            komandCaret($(this),caret);
        });
    });
    $('.komand-line').focus();
    $(document).on('blur','.komand-line',function(){
        $('#komand .komand-caret').remove();
    });
});

keyup keydown jquery处理

1 个答案: