Javascript 在其间执行ajax时粘贴到输入时缺少按键事件

我想显示一个静态html元素，如果用户开始键入，该元素将更改为输入字段并预先填充键入的文本。基本上，我可以将其用于此类代码（假设visible类切换可见性）：

然而，在实际代码中（请参阅测试用例），只有在执行ajax调用（在成功回调中完成）之前，才会填充前缀。然后，在每个字符之后快速键入几个字符，只设置第一个字符，而丢弃其余字符。也许，由于ajax调用介于两者之间，第二个字符永远不会被带到输入中

快速而肮脏的解决方案是不在这一部分组织我的代码：只需在接收输入时直接填充输入

---

有更好的办法吗？例如，收集接收到的输入，直到ajax完成，并且我已经准备好接收实际输入字段中的按键？

我认为问题一直与按键有关。我已经重新构造了您的代码，如果您解开按键，它的性能会很好

(function(){
    $(document).keypress(Keypress);

    function Keypress(event){
    ShowTextbox();
    PrefillInput();
    FocusOnEnd();
    $(document).off('keypress',Keypress)
}

function ShowTextbox(){
    $('input').addClass('visible');
}

function PrefillInput(){
    $('input').val(String.fromCharCode(event.which));
    $('input').focus();
}

function FocusOnEnd(){
    $('input')[0].setSelectionRange(1, 1);
}})()

---

这是一把工作小提琴

你所说的“组织我的代码”到底是什么意思？我为1）显示输入（因为需要做的比显示更多），2）预填充输入，3）关注输入的结尾。如果这是有问题的代码，把它贴在这里是个好主意。代码中没有bug。如果我打字慢一点，一切正常。但是我可以试着做一个工作的测试用例吗？感谢push@Pointy，我已经创建了一个测试用例来显示问题。

(function(){
    $(document).keypress(Keypress);

    function Keypress(event){
    ShowTextbox();
    PrefillInput();
    FocusOnEnd();
    $(document).off('keypress',Keypress)
}

function ShowTextbox(){
    $('input').addClass('visible');
}

function PrefillInput(){
    $('input').val(String.fromCharCode(event.which));
    $('input').focus();
}

function FocusOnEnd(){
    $('input')[0].setSelectionRange(1, 1);
}})()