Javascript 替换输入上的按键

Question

所以我尝试在输入字段中将按键“K”替换为“Z”。 我成功地做到了。 但是有一点延迟，使用户看到“K”变成了“Z”。

这是我的代码:

        function prinner (event)
        {
          document.getElementById("txx").innerHTML= event.key; //Displays key pressed on screen by changing text element.
           if(event.keyCode == 32){
               // User has pressed space
               document.getElementById("txx").innerHTML= "Space";
           }
           if (event.key=="k") // Trying to replace this with z.
           {
            var curval = $("#namaye").val(); //namaye is the ID of the input field.
            var nval = curval.slice(0,(curval.length-1))+"z";
            $("#namaye").val(nval);

           }
        }

       $("#namaye").keyup(prinner);

有人知道更好的方法来实现这一点而不会造成延迟吗？

Answer 1

使用 keydown 而不是 keyup 并取消事件，这样击键实际上不会被打印:

function prinner (event) {

  // Displays key pressed on screen by changing text element.
  document.getElementById("txx").innerHTML= event.key; 
  
  if(event.keyCode == 32){
    // User has pressed space
    document.getElementById("txx").innerHTML= "Space";
  }
  
  // Trying to replace this with z.
  if (event.key=="k") {
  
    var curval = $("#namaye").val(); //namaye is the ID of the input field.
    var nval = curval +"z";
    $("#namaye").val(nval);
    
    // Cancel the event
    event.preventDefault();
    event.stopPropagation();
  }
}

$("#namaye").keydown(prinner);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="namaye">
<p id="txx"></p>