Replace input text value by text in a string in REALTIME

Question

What I need : When I press any key on my keyboard in an input text, I replace it by the content of a 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 the key press before my script replace it. Is-it possible to hide it ?

Thank you.

You are using the wrong event. See [this link](http://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown). — Dinei, May 31 '15 at 13:47
I have read this post before but with the others 'onKeyPress' and 'onKeyDown', the last character is not replace by my function. — Elbarto, May 31 '15 at 14:12

score 3 · Accepted Answer · answered May 31 '15 at 14:14

3

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">

answered May 31 '15 at 14:14

Rick Hitchcock

35,202
5
48
79

yes ! that's exactly what I need ! Thank you. And thank's to everybody for their answers – Elbarto May 31 '15 at 14:25

score 1 · Answer 2 · answered May 31 '15 at 14:21

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 the fiddle: https://jsfiddle.net/ypcxu27o/23/

changes:

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

score 0 · Answer 3 · answered May 31 '15 at 14:08

0

you can try some kind of css trick here , like at initial stage keep font transparent.

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

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

answered May 31 '15 at 14:08

Kaushik Thanki

3,334
3
23
50

Nono · Answer 4 · 2015-05-31T14:19:30.673

0

<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/

edited May 31 '15 at 14:19

answered May 31 '15 at 14:13

Nono

161
7

Replace input text value by text in a string in REALTIME

4 Answers4