Javascript Replace KeyPress on Input

Question

So I was trying replace the key press "K" with "Z" in an input field. I was successfully able to do it. But there is a slight delay which makes the user see that the "K" being changed to "Z".

This is my code:

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

Does anyone know a better way to achieve this without the delay?

Scott Marcus · Accepted Answer · 2017-05-26 20:44:41Z

3

Use keydown instead of keyup and cancel the event so the key stroke doesn't actually get printed:

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>

edited May 26, 2017 at 20:44

answered May 26, 2017 at 20:31

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Conor Mancone Over a year ago

You are always preventing default which means that no characters are being sent out to the input. Given my understanding of the OP, you only want to prevent default on k. Then, because the 'k' never ends up in the input, you don't have to strip it out with the slice function. You just have to append z.

Scott Marcus Over a year ago

@ConorMancone Did you run my code snippet? Did you type a k in the input and see what happens?

Conor Mancone Over a year ago

Yes, it turns into a 'z', but no other letters work. Because you always prevent default you can't actually type in the input box. Only the letter z will actually appear: I don't believe that is what the op had in mind.

Conor Mancone Over a year ago

One more issue: you are still stripping the last character off with your slice function. Because keydown happens before the input actually changes, you aren't stripping off a 'k' key: you are just stripping off the last key typed. so if you try to type 'ak' you won't end up with 'az' (as desired), you will just get 'z'. The OP had the slice because he had to remove the k. The keydown stops that from happening in the first place, so you just have to append a 'z'

Scott Marcus Over a year ago

@ConorMancone Thanks. I was assuming OPs slice code was fine. Updated again.

|

trincot · Accepted Answer · 2017-05-26 20:49:20Z

Use keydown event, and cancel the default behaviour when k is pressed. Also, use selectionStart and selectionEnd properties to replace the characters that were selected at the moment the key was pressed, and to put the cursor at the right position, just after the inserted z:

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>

Since you use jQuery, use $("#....") instead of the more verbose document.getElementById("...."). Also, in the event handler, this will be input element, so use that reference.

Conor Mancone · Accepted Answer · 2017-05-26 20:31:39Z

0

Try using keydown? It happens before the input is actually modified: in fact, if you return false (or e.preventDefault()) inside a keydown listener, it will actually cancel the keystroke, which I think is what you want. Then you manually add your new key. Something like (untested and skipping some details for clarity):

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

answered May 26, 2017 at 20:31

Conor Mancone

2,03017 silver badges23 bronze badges

Comments

brubs · Accepted Answer · 2017-05-26 20:31:40Z

0

You have to add an event.preventDefault() inside your if clause to stop the event propagation and then you can insert your "z" key.

answered May 26, 2017 at 20:31

brubs

1,36710 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript Replace KeyPress on Input

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related