Clever Geek Handbook

Replace input text value by text in string in REALTIME

What I need: When I press any key on the keyboard in the input text, I replace it with the content of the string.

This is what I have: https://jsfiddle.net/ypcxu27o/

<input id="edValue" type="text" onKeyUp="edValueKey()">


function edValueKey()
{
    //var moninput = document.getElementById("edValue").value;
    var monTexte = 'This is my test';
    var cptTexte = document.getElementById("edValue").value;
    cptTexte = cptTexte.length;
    //alert(cptTexte);
    document.getElementById("edValue").value = monTexte.substr(0, cptTexte);
    //document.getElementById("edValue").innerHTML = 'yuty';
}

My problem is that we see a key press before my script replaces it. Can you hide it?

Thank.

+3


source to share


4 answers


This should do it:



document.getElementById('edValue').addEventListener('keydown', function(ev) {
  var monTexte = 'This is my test';
  if(ev.which !== 8) {  //everything except backspace
    this.value= monTexte.substr(0,this.value.length+1);
    ev.preventDefault();
  }
});
      

        
        
        
      

    
<input id="edValue" type="text">
Run codeHide result


+2


source


try this:

<input id="edValue" type="text" onKeyPress="edValueKey(event)">

function edValueKey(e) {
    var monTexte = 'This is my test';
    var cptTexte = document.getElementById("edValue").value;
    cptTexte = cptTexte.length + 1;
    document.getElementById("edValue").value = monTexte.substr(0, cptTexte);
    e.preventDefault();
}

see also fiddle: https://jsfiddle.net/ypcxu27o/23/



changes:

  • use onKeyPress instead of onKeyUp event
  • use e.preventDefault () to prevent showing original input
  • use cptTexte.length + 1 to account for the entered character.
+1


source


you can try some css trick here how to keep the font transparent initially.

 $('#edValue').css('color','transparent');

and after at the end of your operation, set the color to black again $('#edValue').css('color','black');

0


source 


<input id="edValue" type="text" onKeyUp="edValueKey()">

function edValueKey()
{
    var monInput = document.getElementById("edValue");
    var monTexte = 'This is my test';
    var cptTexte = monInput.value;
    monInput.value = monTexte.substr(0, cptTexte.length);
}

https://jsfiddle.net/ypcxu27o/25/

0


source






More articles:


All Articles