CODEWITHSUNDEEP
javascriptjquerystringinputreplace
Sam Thomas
Sam Thomas

Reputation: 57

Javascript Replace KeyPress on Input

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?

Upvotes: 1

Views: 8313

Answers (4)

trincot
trincot

Reputation: 350345

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.

Upvotes: 3

Scott Marcus
Scott Marcus

Reputation: 65796

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>

Upvotes: 3

brubs
brubs

Reputation: 1357

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

Upvotes: 0

Conor Mancone
Conor Mancone

Reputation: 2030

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

Upvotes: 0

Related Questions