keyup keydown jquery 处理答案

【问题标题】：keyup keydown jquery handlingkeyup keydown jquery 处理
【发布时间】：2014-10-19 17:36:04
【问题描述】：

我正在为键的事件侦听器苦苦挣扎是 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);
    });
});

这是我目前用于调用侦听器的代码。我想在按下键的“同时”完成所有事情。你可以在http://server.hvlmnns.de/上测试当前行为

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

【问题讨论】：

你没有解释你期望什么行为或你的代码应该做什么。 this 是什么？在 jsfiddle.net 中显示更多代码和演示也可能会有所帮助

标签： jquery listener keydown

【解决方案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();
    });
});

【讨论】：