Javascript入力時にKeyPressを置き換えます。

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

利用代わり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使用してみてください？これは、入力が実際に変更される前に発生します。実際には、キーダウンリスナの内部で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 3

あなたはevent.preventDefaultを（追加する必要があります）あなたのif節内のイベント伝播を停止し、その後、あなたの「Z」キーを挿入することができます。

Answer 4

​​イベントを使用し、kを押すと、デフォルトの動作をキャンセルします。また、キーが押された瞬間に、選択した文字を置換して、挿入したばかりのzた後、右の位置にカーソルを置くためにselectionStartとselectionEndプロパティを使用します。

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);

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

jQueryを使用しているので、より冗長なdocument.getElementById("....")の代わりに$("#....")を使用してください。また、イベントハンドラではthisが入力要素になりますので、その参照を使用してください。