Question

所以我试图更换按键＆＃34; K＆＃34;与＆＃34; Z＆＃34;在输入字段中。 我成功地做到了。 但是稍有延迟会让用户看到＆＃34; K＆＃34;被改为＆＃34; Z＆＃34;。

这是我的代码：

        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>

Answer 2

使用keydown事件，并在按下k时取消默认行为。此外，使用selectionStart和selectionEnd属性替换按下按键时选择的字符，并将光标放在插入的z之后的正确位置：

＆＃13;

function prinner (event) {
    $("#txx").text(event.keyCode == 32 ? "Space" : event.key); 
    if (event.key=="k") {
        var s = $(this).val();
        var i = this.selectionStart;
        s = s.substr(0, i) + "z" + s.substr(this.selectionEnd);
        $(this).val(s);
        this.selectionStart = this.selectionEnd = i + 1;
        return false;
    }
}

$("#namaye").keydown(prinner);

＆＃13;

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

＆＃13;

由于您使用jQuery，请使用$("#....")而不是更详细的document.getElementById("....")。此外，在事件处理程序中，this将是input元素，因此请使用该引用。

Answer 3

尝试使用keydown？它发生在实际修改输入之前：事实上，如果你在keydown监听器中返回false（或e.preventDefault（）），它实际上会取消键击，我认为这就是你想要的。然后手动添加新密钥。类似的东西（为了清晰起见，未经测试和跳过一些细节）：

    function prinner (event)
    {
       if (event.key=="k")
       {
           event.preventDefault() // makes sure the 'k' key never goes to the input
           $("#namaye").val( $("#namaye").val() + 'z' );
       }
    }

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

Answer 4

您必须在if子句中添加event.preventDefault（）以停止事件传播，然后您可以插入“z”键。

Javascript替换输入上的KeyPress

4 个答案: